使用 SVG 声明性地划线与复合线符号

Question

是否可以创建线符号定义，以便可以使用复合笔画来描绘路径？我需要用下面的符号画线，我不想创建两条路径来做这件事。

可以在功能规范的 "Recreational Boundary" 下找到该规范，此处：CanTopo map symbology definitions

基本上，笔划必须是一条黑色虚线，下方有一条偏移较粗的绿线，位于多段线的 'inside' 上。

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>

使用 SVG 声明性地划线与复合线符号

Declaratively stroke a line with a composite line symbol using SVG

svg

stroke

svg-filters