【发布时间】：2020-02-07 03:11:21
【问题描述】：
我有一个带有标记端的 SVG 路径，我想同时描边路径和标记端。第一个做得很好，但是标记端没有被css代码描边。我试了好几次都没有结果。
我尝试了几种方法来抚摸头部箭头，包括直接抚摸 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/
我希望头部的箭头是黑色的，就像箭头的直线一样。
【问题讨论】：