我有一个带有标记端的 SVG 路径，我想同时描边路径和标记端。第一个做的不错，但是 marker-end 没有被 css code 描边。我试了好几次都没有结果。
我尝试了几种方法来描边箭头，包括直接描边 svg 的“def”，添加自定义 css 和类，但这些都不适合我。
我使用的代码如下:
<html>
<body>
<div id="arrow">
</div>
</body>
</html>
function deg2rad(angle)
{
return angle*Math.PI/180.0;
}
function windArrow(speed, angle)
{
//var angulo = 0;
var direction = 90-angle;
// var speed = 20;
var x = speed*Math.cos(deg2rad(direction)).toFixed(4);
var y = speed*Math.sin(deg2rad(direction)).toFixed(4);
var svgHeader = '<svg version="1.1" id="arrow_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" style="enable-background:new 0 0 493.356 493.356;" xml:space="preserve"><defs><marker id="arrowHead" markerWidth="10" markerHeight="10" refX="0" refY="1" orient="auto" markerUnits="strokeWidth"><path fill="white" stroke-width="20" d="M0,0 L0,2 L2,1 z" /><path d="M0,0 L0,2 L2,1 z" fill="red"/></marker></defs>';
var outerArrow = '<g class="outerArrow"> <path marker-end="url(#arrowHead)" d="M50,50 l'+x.toString()+','+y.toString()+'" /></g>';
var innerArrow = '<g class="innerArrow"><path marker-end="url(#arrowHead)" d="M50,50 l'+x.toString()+','+y.toString()+'" /></g>';
var svgFoot = '</svg>';
return svgHeader+outerArrow + '\n' + innerArrow + svgFoot;
}
document.getElementById('arrow').innerHTML = windArrow(20,45);
.outerArrow{
stroke: black;
stroke-width:6px;
stroke-linecap:round;
stroke-linejoin: round;
}
.innerArrow{
stroke: red;
stroke-width:2px;
stroke-linecap: round;
stroke-linejoin: round;
}
我举了一个例子: https://jsfiddle.net/manespgav/rbua3dhk/
我希望头部箭头笔划成黑色，就像箭头的直线一样。
最佳答案
嗯 - 你可以通过内联样式来解决这个问题
var svgHeader = '<svg version="1.1" id="arrow_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" ><defs><marker id="arrowHead" markerWidth="10" markerHeight="10" refX="0" refY="1" orient="auto" markerUnits="strokeWidth"><path d="M0,0 L0,2 L2,1 z" stroke="none" fill="red"/><path stroke-width=".3" stroke="black" fill="none" d="M0,0 L0,2 L2,1 z" /></marker></defs>';
关于html - 如何描边 svg 路径的 "marker-end"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58309936/