ReSQL.ru
     
powered by simpleCommunicator - 2.0.49     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / SVG. Как выровнять сетку по левому и нижнему краям?
6 сообщений из 6, страница 1 из 1
SVG. Как выровнять сетку по левому и нижнему краям?
    #40020307
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="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, 12:14
| Ответить | Цитировать | Написать  
SVG. Как выровнять сетку по левому и нижнему краям?
    #40020587
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
voraa
Гость
letefon,
Я так и не понял, про какое выравнивание вы говорите?
Прямоугольник 180х80 вы пытаетесь замостить шаблонами 50х25.
Целое число раз они туда не влезут.
В каждом шаблоне рисуете две линии. (60,15) - (10,15) - (10,30) Причем граничные точки выходят за рамку шаблона.

Вы чего хотите то?
...
Рейтинг: 0 / 0
19.11.2020, 20:13
| Ответить | Цитировать | Написать  
SVG. Как выровнять сетку по левому и нижнему краям?
    #40020598
letefon
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
letefon
Участник
> Прямоугольник 180х80 вы пытаетесь замостить шаблонами 50х25
да, такое условие
вот на этом скриншоте (в приложенном файле) замостилось все нормально,
Но нижний и левый края ячеек сетки не совпадают с нижним и левым краями прямоугольника 180х80
...
Рейтинг: 0 / 0
19.11.2020, 20:53
| Ответить | Цитировать | Написать  
SVG. Как выровнять сетку по левому и нижнему краям?
    #40020599
letefon
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
letefon
Участник
Вот попытка выравнить по краям ячеек
Вроде выровнилось, но при этом сетка рисуется кусками
...
Рейтинг: 0 / 0
19.11.2020, 20:55
| Ответить | Цитировать | Написать  
SVG. Как выровнять сетку по левому и нижнему краям?
    #40020600
letefon
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
letefon
Участник
а вот как должно быть в итоге
...
Рейтинг: 0 / 0
19.11.2020, 20:55
| Ответить | Цитировать | Написать  
SVG. Как выровнять сетку по левому и нижнему краям?
    #40020649
letefon
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
letefon
Участник
нашел решение, как-то так:
Код: 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
20.11.2020, 01:07
| Ответить | Цитировать | Написать  
6 сообщений из 6, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / SVG. Как выровнять сетку по левому и нижнему краям?
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=7&tid=1443353]:
 0ms
get settings:
 9ms
get forum list:
 15ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 61ms
get topic data:
 12ms
get forum data:
 2ms
get page messages:
 44ms
get tp. blocked users:
 1ms
others: 14ms
total:  166ms
созд. / загр.: 166ms
x
x
Закрыть


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