使用SVG以复合线符号声明性地描画一条线

debugcn 发表于 Dev

彼得·拉什福斯

是否可以创建线符号定义，以便可以使用复合笔触来描画路径？我需要用以下符号画线，并且我不想创建两条路径来做到这一点。

在此处输入图片说明

可以在“功能规范”中的“娱乐性边界”下找到该规范，这里：CanTopo地图符号系统定义

基本上，笔划必须是一条黑色虚线，并在其下方（在折线的“内侧”）具有一条偏粗的绿色线。

迈克尔·穆兰尼（Michael Mullany）

您可以使用形态过滤器和一些奇特的功能来做到这一点。此过滤器的工作原理

从绿色的短划线和红色填充开始
然后创建一个图层，其中红色填充设置为透明（仅描边）
并将笔触设置为透明的图层（只需填充）
然后走短划线的路径并扩大它，直到间隙重叠:)
添加模糊和不透明剪辑以获取良好的路径（形态结果通常被像素化，并且需要一些帮助才能看起来不错）
将原始的绿色笔触路径更改为黑色
从形态学产生的绿色粗线上覆盖新的黑色笔触路径
用原始填充剪裁结果，以便在主线的边缘而不是中线得到短划线。

总之，最好使用两条路径。但是如果你必须... :)

<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="10"/>
       <feGaussianBlur stdDeviation="6"/>
      <feComponentTransfer result="pre-outer">
        <feFuncA type="table" tableValues="0 0 0 0.95 .95 .95 .95 .95  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" stroke-dasharray="25, 5, 3, 5"/>
</g>
</svg>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。