SVG中<marker>元素描边（stroke）不生效的问题及解决咨询

我帮你排查了这个问题，主要有两个核心原因导致你的marker描边没效果：

• 本身的stroke属性不会传递给内部元素：你直接在<marker>标签上设置stroke是无效的，这个属性不会继承给里面的<path>，必须直接给marker内部的path配置stroke属性。
• path默认填充会覆盖描边：你的marker内部path是一个闭合的三角形（SVG会自动闭合折线路径），默认fill是黑色，会完全盖住描边，所以必须把fill设为none才能让stroke显示出来。

另外还要注意：marker默认会继承主图形（比如你代码里的<line>）的stroke属性，如果不给marker里的path显式指定stroke，它会沿用line的黑色stroke，所以一定要明确设置path的stroke值。

下面是修改后的有效代码，我把两个测试案例都修正了：

案例1：显式给marker内部path设置stroke和fill:none #

<svg>
 <g>
 <defs>
 <marker id="arrowhead" markerWidth="40" markerHeight="20" refX="0" refY="3.5" orient="auto">
 <!-- 关键：设置stroke、strokeWidth，同时fill设为none -->
 <path id="arrow_marker" d="M0 0, 10 3.5, 0 7" stroke="red" strokeWidth="10px" fill="none" />
 </marker>
 </defs>
 <path d="M0 0, 10 3.5, 0 7"/>
 <line x1="0" y1="0" x2="200" y2="200" stroke="#000" strokeWidth="8" markerEnd="url(#arrowhead)" />
 </g>
</svg>

案例2：确保marker内path的stroke生效 #

<svg>
 <g>
 <defs>
 <marker id="arrowhead" markerWidth="40" markerHeight="20" refX="0" refY="3.5" orient="auto">
 <!-- 同样要设置fill:none，不然红色描边会被默认黑色填充覆盖 -->
 <path id="arrow_marker" d="M0 0, 10 3.5, 0 7" stroke="red" strokeWidth="10px" fill="none" />
 </marker>
 </defs>
 <path stroke="red" strokeWidth="10px" d="M0 0, 10 3.5, 0 7"/>
 <line x1="0" y1="0" x2="200" y2="200" stroke="#000" strokeWidth="8" markerEnd="url(#arrowhead)" />
 </g>
</svg>

这样修改后，你就能看到marker上的红色描边正常显示了。

内容的提问来源于stack exchange，提问作者symlon