Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 SVG. Как выровнять сетку по левому и нижнему краям?  [new]
letefon
Member

Откуда:
Сообщений: 133
Всем привет!
В SVG делаю сетку, при этом размер сетки не кратен размеру самой области, в которой находится сетка.
Когда делаю без выравнивания, сетка рисуется нормально.
При попытке смещения, сетка выравнивается, но при этом рисуется кусками.
Пробовал по разному, но ничего не вышло.

Код без выравнивания:
<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>

Код с выравниванием, где сетка прорисовывается кусками:
<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>

Что не так делаю?
19 ноя 20, 12:14    [22235218]     Ответить | Цитировать Сообщить модератору
 Re: SVG. Как выровнять сетку по левому и нижнему краям?  [new]
voraa
Member

Откуда:
Сообщений: 166
letefon,
Я так и не понял, про какое выравнивание вы говорите?
Прямоугольник 180х80 вы пытаетесь замостить шаблонами 50х25.
Целое число раз они туда не влезут.
В каждом шаблоне рисуете две линии. (60,15) - (10,15) - (10,30) Причем граничные точки выходят за рамку шаблона.

Вы чего хотите то?
19 ноя 20, 20:13    [22235676]     Ответить | Цитировать Сообщить модератору
 Re: SVG. Как выровнять сетку по левому и нижнему краям?  [new]
letefon
Member

Откуда:
Сообщений: 133
> Прямоугольник 180х80 вы пытаетесь замостить шаблонами 50х25
да, такое условие
вот на этом скриншоте (в приложенном файле) замостилось все нормально,
Но нижний и левый края ячеек сетки не совпадают с нижним и левым краями прямоугольника 180х80

К сообщению приложен файл. Размер - 16Kb
19 ноя 20, 20:53    [22235702]     Ответить | Цитировать Сообщить модератору
 Re: SVG. Как выровнять сетку по левому и нижнему краям?  [new]
letefon
Member

Откуда:
Сообщений: 133
Вот попытка выравнить по краям ячеек
Вроде выровнилось, но при этом сетка рисуется кусками

К сообщению приложен файл. Размер - 16Kb
19 ноя 20, 20:55    [22235705]     Ответить | Цитировать Сообщить модератору
 Re: SVG. Как выровнять сетку по левому и нижнему краям?  [new]
letefon
Member

Откуда:
Сообщений: 133
а вот как должно быть в итоге

К сообщению приложен файл. Размер - 21Kb
19 ноя 20, 20:55    [22235708]     Ответить | Цитировать Сообщить модератору
 Re: SVG. Как выровнять сетку по левому и нижнему краям?  [new]
letefon
Member

Откуда:
Сообщений: 133
нашел решение, как-то так:
<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>
20 ноя 20, 01:07    [22235806]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить