SVG формы с заливкой, обводкой и шириной обводки - PullRequest
Новая
       51

SVG формы с заливкой, обводкой и шириной обводки

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

У меня есть многоугольник с полями, шириной обводки и цветами заливки.

Я ищу несколько многоугольников;ниже один из них с 4 ребрами.Из которых у 3 ребер есть только обводка, а у другого - цвет заливки.

image

На рисунке выше у нас есть одна сторона многоугольника с заливкой и обводкой, а другие только с обводкойstrokeWidth 1.

Я совершенно новичок в SVG.Как лучше всего нарисовать эту фигуру?

Контуры, линии, многоугольники или их комбинация?Будут ли здесь полезны правила заполнения?Предложения, пожалуйста.

1 Ответ

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

Сочетание путей и прямоугольников, скорее всего, и будет тем, что вы в итоге получите.Я считаю, что проще заполнить явно, потому что легче манипулировать непосредственно с JavaScript, если это необходимо.

Вот одно из решений.Я нахожу, что при работе с SVG все как можно проще сделает вашу жизнь намного проще. 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink" 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:inkscape="http://www.inkscape.org/namespaces/inkscape" width="777" height="480" style="">                                    
  <title>my vector image</title>                                                                                                 <g class="currentLayer" style="">
  <title>Layer 1</title>
  <rect fill="#4a90d6" stroke="#222222" style="color: rgb(0, 0, 0);" stroke-width="2" stroke-linejoin="round" stroke-dashoffset="" fill-rule="nonzero" id="svg_1" x="8" y="8" width="13" height="74" class="selected"/>
  <path fill="#4a90d6" fill-opacity="1" stroke="#222222" stroke-opacity="1" stroke-width="2" stroke-dasharray="none" stroke-linejoin="round" stroke-linecap="round" stroke-dashoffset="" fill-rule="nonzero" opacity="1" marker-start="" marker-mid="" marker-end="" d="M 20.8456 8.25316 L 87.1747 7.74683" id="svg_5" class="selected"/>
  <path fill="#4a90d6" fill-opacity="1" stroke="#222222" stroke-opacity="1" stroke-width="2" stroke-dasharray="none" stroke-linejoin="round" stroke-linecap="round" stroke-dashoffset="" fill-rule="nonzero" opacity="1" marker-start="" marker-mid="" marker-end="" d="M 21.0987 81.924 L 119.073 80.4051" id="svg_9" class="selected"/>
  <path fill="#4a90d6" fill-opacity="1" stroke="#222222" stroke-opacity="1" stroke-width="2" stroke-dasharray="none" stroke-linejoin="round" stroke-linecap="round" stroke-dashoffset="" fill-rule="nonzero" opacity="1" marker-start="" marker-mid="" marker-end="" d="M 86.162 6.98734 L 118.061 79.6456" id="svg_14" class="selected"/>
  </g>
  </svg>
...