SVG 用不同的颜色制作路径的不同部分答案

【问题标题】：SVG make different sections of the path in different colorsSVG 用不同的颜色制作路径的不同部分
【发布时间】：2019-06-11 03:45:45
【问题描述】：

I have been trying to implement the following requirements.
 1. SVG path to have multiple colors on different sections (eg - red color the curves and rest of it, in black color)
 2. Only allow mouse event- click on those colored areas (curves)

I have tried with plain javascript and snap.svg

    Plain html & Javascript
   [Codepen using HTML & Js][1]
    SNAP.svg
   [Codepen using SNAP.svg][2]


   [1]: https://codepen.io/sanathko1234/pen/vvMQQZ
   [2]: https://codepen.io/sanathko1234/pen/OrGoRa

How can this be achieved?

【问题讨论】：

使用多条路径要容易得多。

标签： javascript html svg snap.svg

【解决方案1】：

一种解决方案是使用路径两次：第一次是绿色的，然后是使用stroke-dasharray 的路径。破折号仅在曲线上方。如果您不喜欢破折号的位置或长度，请将其更改为您需要的。间隙对鼠标事件不敏感，只有破折号是。

在 css 中我添加了#gold:hover{cursor:pointer}，以便您可以看到只有破折号对鼠标敏感。

我希望它有所帮助。

svg{border:1px solid}
use{fill:none;stroke-width:18;}
#gold:hover{cursor:pointer}

<svg viewBox="-10 50 580 360" width="580" height="360" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="svg_1" d="m555,272c1,0.76736 4,85.76736 -71,97.76736c-75,12 -387,-39 -388,-39.76736c0,-0.23264 -29,-1.23264 -45,-21.23264l-42,-124.76736c-3,-11.23264 -3,-21.23264 3,-26.23264c6,-5 46,-67 69,-69.76736l474,184z" />
  </defs>
 <g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="360" width="580" x="-10" y="50"/>
 </g>
 <g>
  <title>Layer 1</title>
  
<use xlink:href="#svg_1" stroke="green"  />   
<use xlink:href="#svg_1" stroke="gold" stroke-dasharray ="130 370 110 60 90 40 90 400 52.45" id="gold" pointer-events="stroke" />
 </g>
</svg>

观察：破折号和间隙的总和是 1342.45，这也是总路径长度。

【讨论】：