SVG: группировка путей с контурной границей (и создание нового пути на основе существующих) - PullRequest
Новая
       36

SVG: группировка путей с контурной границей (и создание нового пути на основе существующих)

0 голосов
/ 06 октября 2018

У меня есть SVG-файл с четырьмя путями (четырьмя квадратами): 

<html>
<body>

<svg height="1000" width="1000">
    <path fill="blue" id="square1" d="M0 0 L0 100 L100 100 L100 0 Z" />
    <path fill="green" id="square2" d="M100 0 L100 100 L200 100 L200 0 Z" />

    <path fill="yellow" id="square3" d="M0 100 L0 200 L100 200 L100 100 Z" />
    <path fill="red" id="square4" d="M100 100 L200 100 L200 200 L100 200 Z" />
</svg>

</html>
</body>

четыре квадрата

Я хотел бы разделить эти четыре квадратавизуально на две группы (синий / зеленый и желтый / красный).

Рамка должна быть нарисована вокруг двух синих квадратов, а также вокруг двух зеленых квадратов.

Как добавитьконтурная граница вокруг этих двух групп квадратов?

Возможно ли также автоматически создать новый объект для каждой группы, имеющий собственный идентификатор?

Заранее спасибо

1 Ответ

0 голосов
/ 06 октября 2018

Вы можете использовать меньший квадрат поверх большего квадрата, чтобы создать границы, например: 

<path fill="black" id="square1-bg" d="M0 0 L0 100 L100 100 L100 0 Z" />
<path fill="blue" id="square1" d="M3 3 L3 97 L97 97 L97 3 Z" />

Насколько лучше всего использовать JS для шаблонов: https://jsfiddle.net/Lyzpe35m/10

...