SVG делает разные участки пути разными цветами - PullRequest
Новая
       6

SVG делает разные участки пути разными цветами

0 голосов
/ 17 января 2019 
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?

1 Ответ

0 голосов
/ 19 января 2019

Одним из решений будет использование пути дважды: сначала зеленый, а затем следующий, используя 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, что также является общей длиной пути.

...