Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / SVG. Как выровнять сетку по левому и нижнему краям? / 6 сообщений из 6, страница 1 из 1
19.11.2020, 12:14
    #40020307
letefon
letefon
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SVG. Как выровнять сетку по левому и нижнему краям?
Всем привет!
В SVG делаю сетку, при этом размер сетки не кратен размеру самой области, в которой находится сетка.
Когда делаю без выравнивания, сетка рисуется нормально.
При попытке смещения, сетка выравнивается, но при этом рисуется кусками.
Пробовал по разному, но ничего не вышло.

Код без выравнивания:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<div style="width: 40%; padding-bottom: 20%;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="xMinYMin meet">

<rect x="0" y="0" width="200" height="100" stroke="grey" stroke-width="0.5" fill="none" />

<defs>
    <pattern id="Grid" width="50" height="25" patternUnits="userSpaceOnUse">
    <path d="M 50 0 L 0 0 0 25" fill="none" stroke="gray" stroke-width="2"/>
    </pattern>
</defs>

<rect x="10" y="10" width="180" height="80" stroke="grey" stroke-width="0.5" fill="url(#Grid)" />

</svg>
</div>


Код с выравниванием, где сетка прорисовывается кусками:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<div style="width: 40%; padding-bottom: 20%;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="xMinYMin meet">

<rect x="0" y="0" width="200" height="100" stroke="grey" stroke-width="0.5" fill="none" />

<defs>
    <pattern id="Grid2" width="50" height="25" patternUnits="userSpaceOnUse">
    <path d="M 60 15 L 10 15 10 30" fill="none" stroke="gray" stroke-width="2"/>
    </pattern>
</defs>

<rect x="10" y="10" width="180" height="80" stroke="grey" stroke-width="0.5" fill="url(#Grid2)" />

</svg>
</div>


Что не так делаю?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.11.2020, 20:13
    #40020587
voraa
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SVG. Как выровнять сетку по левому и нижнему краям?
letefon,
Я так и не понял, про какое выравнивание вы говорите?
Прямоугольник 180х80 вы пытаетесь замостить шаблонами 50х25.
Целое число раз они туда не влезут.
В каждом шаблоне рисуете две линии. (60,15) - (10,15) - (10,30) Причем граничные точки выходят за рамку шаблона.

Вы чего хотите то?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.11.2020, 20:53
    #40020598
letefon
letefon
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SVG. Как выровнять сетку по левому и нижнему краям?
> Прямоугольник 180х80 вы пытаетесь замостить шаблонами 50х25
да, такое условие
вот на этом скриншоте (в приложенном файле) замостилось все нормально,
Но нижний и левый края ячеек сетки не совпадают с нижним и левым краями прямоугольника 180х80
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.11.2020, 20:55
    #40020599
letefon
letefon
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SVG. Как выровнять сетку по левому и нижнему краям?
Вот попытка выравнить по краям ячеек
Вроде выровнилось, но при этом сетка рисуется кусками
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.11.2020, 20:55
    #40020600
letefon
letefon
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SVG. Как выровнять сетку по левому и нижнему краям?
а вот как должно быть в итоге
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.11.2020, 01:07
    #40020649
letefon
letefon
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SVG. Как выровнять сетку по левому и нижнему краям?
нашел решение, как-то так:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<div style="width: 40%; padding-bottom: 20%;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="xMinYMin meet">

<rect x="0" y="0" width="200" height="100" stroke="grey" stroke-width="0.5" fill="none" />

<defs>
    <pattern id="Grid2" width="50" height="25" patternUnits="userSpaceOnUse" patternTransform="translate(10 15)" >
    <path d="M 50 0 L 0 0 0 25" fill="none" stroke="gray" stroke-width="2"/>
    </pattern>
</defs>

<rect x="10" y="10" width="180" height="80" stroke="grey" stroke-width="0.5" fill="url(#Grid2)" />

</svg>
</div>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / SVG. Как выровнять сетку по левому и нижнему краям? / 6 сообщений из 6, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 367ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1443353]:
 0ms
get settings:
 10ms
get forum list:
 14ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 42ms
get topic data:
 14ms
get forum data:
 3ms
get page messages:
 47ms
get tp. blocked users:
 2ms
others: 227ms
total:  367ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]