如何描边 "marker-end" 的 svg 路径？

Question

我有一个带有标记端的 SVG 路径，我想对路径和标记端都进行描边。第一个做得很好，但是标记端没有被 css 代码抚摸。我试了好几次都没有结果。

我尝试了几种方法来描边箭头，包括直接描边 svg 的 "def"，添加自定义 css 和 class，但是 none这对我有用。

我使用的代码如下：

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

我做了一个 fiddle 例子： https://jsfiddle.net/manespgav/rbua3dhk/

我希望头部箭头的笔触是黑色的，就像箭头的直线一样。

Answer 1

嗯 - 你可以通过内联样式来解决这个问题

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

如何描边 "marker-end" 的 svg 路径？

how to stroke "marker-end" of svg path?

html

css

svg

stroke