使用SVG以复合线符号声明性地描边线

Question

是否可以创建线符号定义，以便可以使用复合笔划描边路径？我需要使用以下符号绘制线条，我不想创建两条路径来执行此操作。

规范可在功能规范中的“娱乐边界”下找到，此处：CanTopo map symbology definitions

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

Answer 1

你可以使用形态学过滤器和一些幻想来做到这一点。此过滤器按

工作

• 以绿色短划线和红色填充开始
• 然后创建一个红色填充设置为透明（仅中风）的图层
• 并且笔划设置为透明（仅填充）
• 然后采用短划线路径并将其扩大直至间隙重叠：）
• 添加模糊和不透明度剪辑以获得良好的路径（形态结果通常是像素化的，需要一些帮助才能看起来很好）
• 将原始绿色笔划路径更改为黑色
• 在我们从形态学
生成的肥绿线上覆盖新的黑色笔划路径
• 使用原始填充剪切结果，因此我们在主线的边缘而不是中间获得划线笔划。

总之，你最好使用两条路径。但如果你必须......：）

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