带边框的SVG路径

Question

如何使用类似于

的填充和轮廓创建路径

到目前为止，我找到了几种方法，但没有一种方法特别干净。

一种方法是使用paint-order但这在移动和IE中不起作用。

复制路径的另一种方式......但这会产生不必要的数据量。

有没有不同的方法使用CSS来简单地为SVG路径创建轮廓或边框？

<svg height="50" width="300">
    <path d="M5 20 1215 20" />
</svg>

path {
  fill: red;
  stroke: #646464;
  stroke-width:10px;
  stroke-linejoin: round;
}

这是codepen

Answer 1

您必须将路径绘制为大纲，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" viewBox="0 0 220 220">
    <path fill="#ddd" stroke="#3f4141" d="M0 0h220v220H0z"/>
    <path fill="#fff" stroke="#00b400" stroke-width="4" 
     d="M 159.8 30.3
        h -110
        v 120
        h-20
        l 30 40 
          30 -40
        h-20
        v-100
        h90"/>
</svg>

在Inkscape中绘制，在SVGOMG中进行优化，然后手动调整。

修改

我有一个使用标记的工作解决方案，其工作原理如下：

• 将该行（任何行）创建为符号
• 通过将线条的两个实例分层，使用不同的线宽来创建一个虚拟笔划
• 添加带有预定义笔划的箭头作为标记
• 发际线笔划有时会在线的开头显示...使用另一个使用背景颜色遮罩的标记解决此问题。
  • 这种技术只适用于普通的背景。

<svg style="display: inline-block; margin-left: 2em;" width="220" height="220" viewBox="0 0 220 220" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <marker id="arrow" markerWidth="45" markerHeight="70" refX="5" refY="35" orient="auto" markerUnits="userSpaceOnUse">
      <path fill="#fff" stroke="#00b400" stroke-width="4" d="M 2 25  v-20  l 40,30 -40,30 v-20"/>
    </marker>

    <!-- Used to hide hairline that shows through, fill color must match background color -->
    <marker id="startMask" markerWidth="2" markerHeight="30" refX="1" refY="15" orient="auto" markerUnits="userSpaceOnUse">
      <path fill="#ddd" d="M0 0 v30 h2 v-30 z" />
    </marker>
    
    <symbol id="line">
      <path d="M 159.8 30.3  h -110 v 120"/>
    </symbol>

    <symbol id="line2">
      <path d="M 140 60 l 20 30"/>
    </symbol>
    <symbol id="line3">
      <path d="M 100 80 l 20 70"/>
    </symbol>
  </defs>
  
  <path id="grey-box" fill="#ddd" stroke="#3f4141" d="M0 0h220v220H0z"/>
  
  <use id="faux-stroke" xlink:href="#line" fill="none" stroke="#00b400" stroke-width="28" marker-start="url(#startMask)"/>
  <use xlink:href="#line" fill="none" stroke="white" stroke-width="20" marker-end="url(#arrow)" marker-start="url(#startMask)"/>
  
  <use id="faux-stroke2" xlink:href="#line2" fill="none" stroke="#00b400" stroke-width="28" />
  <use xlink:href="#line2" fill="none" stroke="white" stroke-width="20" marker-end="url(#arrow)" marker-start="url(#startMask)"/>
  
  <use id="faux-stroke3" xlink:href="#line3" fill="none" stroke="#00b400" stroke-width="28" />
  <use xlink:href="#line3" fill="none" stroke="white" stroke-width="20" marker-end="url(#arrow)" marker-start="url(#startMask)"/>
  
</svg>

希望这有帮助