Question

有没有办法定义单个多边形的笔划，使其看起来像多个胶合多边形？看到这个图像：
Adjanced lines

Answer 1

不，不是。（将来Vector Effects可能允许您这样做。）

目前，您需要使用不同的笔触颜色和厚度绘制两个多边形，然后使用剪切路径确保看起来更粗的笔划也不会在形状内部绘制。例如：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100" height="100">
  <defs>
    <polygon id="p" points="20,10 10,60 30,50 50,30"/>
    <clipPath id="c">
      <!-- a 100x100 square with the polygon cut out of it -->
      <path d="M0,0 100,0 100,100 0,100 z M20,10 10,60 30,50 50,30 z"/>
    </clipPath>
  </defs>
  <rect width="100" height="100"/>
  <g clip-path="url(#c)" fill="none">
    <use xlink:href="#p" stroke="yellow" stroke-width="8"/>
    <use xlink:href="#p" stroke="blue" stroke-width="4"/>
  </g>
</svg>

Answer 2

与上一个答案一样，您需要2条路径。然而，我会使用2个圆环孔，其中孔几乎与整个圆环的直径有关。需要注意的是内圈的外侧形成外圈的内侧。显然，笔画宽度为零。

Answer 3

您可以使用形态滤镜来模拟它。

<svg width="2000px" height="2000px" viewBox="0 0 4000 4000">
  <defs>
    <filter id="dual-line" primitiveUnits="userSpaceOnUse">
      <feColorMatrix result="just-stroke" type="matrix" values="0 0 0 0 0
                                           0 1 0 0 0 
                                           0 0 1 0 0 
                                           -1 0 0 1 0"/>
      
       <feColorMatrix in="SourceGraphic" result="just-fill" type="matrix" 
                                   values="0 0 0 0 1
                                           0 0 0 0 0 
                                           0 0 0 0 0 
                                           0 0 0 1 0"/>     
      
  
       <feMorphology in="just-stroke" operator="dilate" radius="5"/>
       <feGaussianBlur stdDeviation="6"/>
      <feComponentTransfer result="pre-outer">
        <feFuncA type="table" tableValues="0 0 .75  1">
      </feComponentTransfer>
        
        <feColorMatrix result="blackstroke" in="just-stroke" type="matrix" values=" 0 0 0 0 0
                                                                0 0 0 0 0
                                                                0 0 0 0 0 
                                                                0 0 0 1 0"/>
        
       <feComposite operator="over" in2="pre-outer" in="blackstroke"/>
        <feComposite operator="in" in2="just-fill"/>
   
    </filter>
    </defs>
<g filter="url(#dual-line)">
  <path d="M100 800 C 400 100, 650 100, 950 800 S 1500 1500, 100 800" stroke-width="5" stroke="green" fill="red"/>
</g>
</svg>

SVG笔划为胶合线

3 个答案: