Question

我有一个带有标记端的SVG路径，我想同时绘制路径和标记端。第一个做得很好，但是标记端不会被css代码抚摸。我尝试了几次，但没有结果。

我尝试了几种方法来抚摸箭头，包括直接抚摸svg的“ def”，添加自定义css和class，但是这些方法都不适合我。

我使用的代码如下：

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

我希望箭头的笔触像箭头的直线一样呈黑色。

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

如何笔触SVG路径的“标记结束”？

1 个答案: