Как погладить "маркер-конец" пути SVG? - PullRequest
Новая
       69

Как погладить "маркер-конец" пути SVG?

1 голос
/ 09 октября 2019

У меня есть SVG-путь с маркером-концом, и я хочу обвести и путь, и маркер-конец. Первый сделан хорошо, но конец маркера не обводится кодом CSS. Я пробовал несколько раз, но безрезультатно.

Я пробовал несколько способов, чтобы погладить стрелку головы, в том числе непосредственно «def» svg, добавив пользовательские 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/

Я ожидаю, что стрелка головы погладится по черному, как прямая линия стрелки.

1 Ответ

1 голос
/ 10 октября 2019

Ну, вы можете это исправить, просто вставив стили 

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