1

有没有办法定义单个多边形的笔触，使它看起来像多个胶合多边形？看这张图片：
相邻行

4

3 回答 3

2

不，目前没有。（将来，矢量效果可能会让您这样做。）

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

<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>
于 2011-02-13T21:37:30.340 回答
0

与最后一个答案一样，您需要 2 条路径。但是，我会使用 2 个甜甜圈孔，孔的直径几乎是整个环的直径。要注意的是，内环的外侧形成了外环的内侧。显然笔画宽度为零。

于 2011-02-14T04:17:39.700 回答
0

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

<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>

于 2015-07-07T06:13:31.663 回答