带边框的SVG路径 [英] SVG path with border

问题描述

如何创建具有类似于

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

So far I have found a couple of ways but none that is particularly clean.

一种方法是使用 paint-order ，但这不适用于移动设备和IE.

One way would be to use paint-order but this does not work in mobile and IE.

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

Another way duplicate the path... but this would create needless amounts of data.

是否有使用CSS的简单方法为SVG路径创建轮廓或边框?

Is there a different way to use CSS to simply create an outline or border for an SVG path?

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

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

这是 codepen

推荐答案

您必须这样绘制路径作为轮廓:

You have to draw the path as an outline as so:

<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中进行优化，然后手动进行调整.

Sketched in Inkscape, optimised in SVGOMG then tweaked by hand.

我有一个使用标记的可行解决方案，其工作方式如下:

I have a working solution using markers that works as follows:

• 将行(任何行)创建为符号
• 通过将线的两个实例彼此叠放在一起(线宽不同)来创建人造笔触
• 添加带有预定义笔触的箭头作为标记
• 有时会在行的开头显示高线笔画...使用另一个使用背景色掩盖的标记来解决此问题.
  • 该技术只能在纯背景下使用.

  <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>
      <style>
        .arrow-stroke {
          stroke: #00b400;
          stroke-width: 28;
          /* marker-end etc should be supported but unsure of browser support */
        }
        .arrow-fill {
          stroke: white;
          stroke-width: 20
        }
      </style>
      <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 q 0 40 20 70"/>
      </symbol>
    </defs>
    
    <path id="grey-box" fill="#ddd" stroke="#3f4141" d="M0 0h220v220H0z"/>
    
    <g fill="none">
      <use xlink:href="#line" class="arrow-stroke" />
      <use xlink:href="#line" class="arrow-fill" marker-end="url(#arrow)" marker-start="url(#startMask)" />
    
      <use xlink:href="#line2" class="arrow-stroke" />
      <use xlink:href="#line2" class="arrow-fill" marker-end="url(#arrow)" marker-start="url(#startMask)" />
    
      <use xlink:href="#line3" class="arrow-stroke" />
      <use xlink:href="#line3" class="arrow-fill" marker-end="url(#arrow)" marker-start="url(#startMask)" />
    </g>
  </svg>

  希望这会有所帮助

  这篇关于带边框的SVG路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！