SVG shapes with fill, stroke and strokewidth

孤人 提交于 2019-12-14 04:23:35

问题


I have a polygon shape with border, stroke-width and fill colors.

I am looking for multiple polygon shapes; below is one of them with 4 edges. Out of which 3 edges just have stroke and the other edge has fill color.

From above figure we have one side of the polygon with fill and stroke, others just stroke with strokeWidth 1.

I am quite new to SVG. What can be the best way to draw this shape?

Paths, lines, polygons, or combination of this? Will fill-rules be helpful here? Suggestions please.


回答1:


A combination of paths and rectangles will likely be what you end up with. I find it easier to fill explicitly because it is easier to manipulate directly with JavaScript if needed.

Here is one solution. I find when working SVG keeping things as simple as possible will make your life much easier.

<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>


来源:https://stackoverflow.com/questions/52860999/svg-shapes-with-fill-stroke-and-strokewidth

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!