Как работать с SVG?

Question

[Оптимус Пьян]

Сгенерировал простую SVG-картинку, вставил в html https://jsfiddle.net/bpzqah0u/
Возникло несколько вопросов:
1) Квадрата 4, а блоков path 6 штук, как выделить структуру отвечающую за один квадрат (что бы раскрасить его внутри например, или реакцию на клик повесить?)
2) Иногда (пример ниже) используют data-path а иногда просто path как в этом случае. В чём между ними разница? Я встроил все координы из path в шесть div блоков но картинка сломалась в результате...

<path
       style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 71.059523,93.648807 112.78774,92.538811"
       id="path3688"
       inkscape:connector-curvature="0" />


<div class="mapArea" data-path="M306,11 415,42 389,86 284,28z"></div>

Answer 1

[Максим]

ну вообще каждый квадратик должен быть на отдельном слое

svg code

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="svg8"
   version="1.1"
   viewBox="0 0 1000 297"
   height="297mm"
   width="400mm">
    <g
       transform="translate(0)"
       id="g4523">
      <rect
         style="fill:red;stroke:#000000;"
         id="rect3680"
         width="213.81561"
         height="243.7498"
         x="90.871643"
         y="30.799549" />

      <rect
         style="fill:green;stroke:#000000;"
         id="rect4488"
         width="224.50641"
         height="245.88795"
         x="304.68726"
         y="30.799549" />

      <rect
         style="fill:blue;stroke:#000000;"
         id="rect4488-0"
         width="224.50642"
         height="245.88797"
         x="529.19366"
         y="30.799549" />

      <rect
         style="fill:orange;stroke:#000000;"
         id="rect4488-5"
         width="224.50642"
         height="245.88797"
         x="753.70007"
         y="30.799549" />
    </g>
  </g>
</svg>

И так у нас получится каждый элемент по отдельности , каждому по отдельности можно в <defs></defs> задать своё изображение или что требуется

P:S то что у вас на fiddle это элементы которые вы ( очевидно ) рисовали кривыми Безье но в inkscape есть инструмент Прямоугольник/Квадрат и т д

Comments

[Оптимус Пьян]

Супер, спасибо. Можно пару вопросов:
1) Как вы преобразовали path в rect? У rect например появились значения x,y откуда взялись данные для них? Ведь в path их не было
2) Такие данные мне редактор Inkscape выгрузил, как сделать что бы он выгружал в rect, не вручную же их писать?
3) Как написать что-то внутри квадратов?

[Максим]

Оптимус Пьян: ну смотрите - rect с английского языка переводится Прямоугольник а X и Y это координаты относительно самого SVG документа , к примеру ваш SVG документ имеет ширину 1000 а высоту 200 , так вот Х отвечает за координаты по высоте а Y координату по ширине
Это проще нарисовать на листе бумаги и потом перенести эти координаты в документ

[Максим]

Оптимус Пьян: я раньше весь SVG рисовал на листе в клетку , одна клетка это 1см и вот вычислял координаты и ставил точку , а контуры соединяются сами в элементе polygon и polyline в случае с rect text circle требуется указание их координат

[Оптимус Пьян]

А что делать если нужен один элемент в форме буквы Т или Г? Линиями рисовать отдельно? Их как-то можно объединить потом в один элемент?

[Максим]

Оптимус Пьян: Ну это опять же координаты , хотя SVG это очень мощный инструмент , это пример не из inkscape

[Максим]

Оптимус Пьян: это буквы на линиях : https://codepen.io/LenskyUser/pen/OgLVKr?editors=1010

[Оптимус Пьян]

Спасибо, я имел ввиду фигуры в форме букв (внутри пустое место)

[Максим]

Оптимус Пьян: ааа , css.yoksel.ru/css-and-svg-masks