具有填充，笔触和笔触宽度的SVG形状 [英] SVG shapes with fill, stroke and strokewidth

问题描述

我有一个带有边框，笔触宽度和填充颜色的多边形.

我正在寻找多个多边形形状；下面是其中4条边缘的其中之一.其中3条边缘仅具有笔触，另一条边缘具有填充色.

在上图中，多边形的一侧具有填充和笔触，另一侧仅具有strokeWidth 1.

我对SVG相当陌生.绘制此形状的最佳方法是什么?

路径，直线，多边形或这些的组合?填写规则对您有帮助吗?请提出建议.

解决方案

路径和矩形的组合很可能就是最终的结果.我发现更容易进行显式填充，因为如果需要，可以更轻松地直接使用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> 

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.

解决方案

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>

这篇关于具有填充，笔触和笔触宽度的SVG形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！