带有填充、描边和描边宽度的 SVG 形状答案

【问题标题】：SVG shapes with fill, stroke and strokewidth带有填充、描边和描边宽度的 SVG 形状
【发布时间】：2018-10-17 18:00:26
【问题描述】：

我有一个带有边框、笔划宽度和填充颜色的多边形。

我正在寻找多个多边形形状；下面是其中一个有 4 个边。其中 3 条边只有描边，另一条边有填充颜色。

从上图中，我们看到多边形的一侧带有填充和描边，其他边的描边宽度为 1。

我对 SVG 很陌生。绘制此形状的最佳方法是什么？

路径、线、多边形或它们的组合？填充规则在这里有用吗？请提出建议。

【问题讨论】：

使用 InkScape 绘制此图，然后根据您的需要调整输出。

标签： javascript svg svg.js

【解决方案1】：

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

【讨论】：

两者都可以是路径吗？在过渡期间，我想将这些笔画转换为填充形状。我的意思是三个边缘。 @RandyCasburn
(a) 这里不需要三个路径。您只需要一条路径。 (b) 是的，没有理由不能对填充边缘和未填充边缘使用路径。
是的……都可以是路径。我只是快速地把它放在一起给你一个起点。