Как использовать обводку в качестве обтравочного контура в SVG?
У меня есть такой path:
<path class="path" d="M0,550L0,366.6666666666667C0,366.6666666666667,95.43389463154384,198.61111111111114,143.31860620206734,183.33333333333337C191.20331777259085,168.0555555555556..."></path>
На моей странице это отображается так:
Я бы хотел, чтобы это был clipping path, на котором я отображаю набор прямоугольников. У меня сейчас это выглядит так:
Тем не менее, я бы хотел, чтобы это была линия шириной в 2 пикселя, которая меняет цвет, когда переходит в область нового <rect>. В настоящее время я думаю о том, чтобы подойти к этому, каким-то образом обведя путь в <clipPath>, но я открыт для других методов, чтобы это работало.
Свободный перевод вопроса How do I use a stroke as a clipping path in SVG? от участника @Lucas.
Ответы (2 шт):
Автор решения: Alexandr_TT
→ Ссылка
<clipPath> - неправильный подход для этого случая. Правильное решение - использовать <mask>.
Вот так это выглядит до обрезки
<svg width="500" height="240">
<g>
<rect y="0" width="500" height="60" fill="red"/>
<rect y="60" width="500" height="60" fill="blue"/>
<rect y="120" width="500" height="60" fill="green"/>
<rect y="180" width="500" height="60" fill="yellow"/>
</g>
</svg>Теперь применим маску:
<svg width="500" height="240">
<defs>
<mask id="graph">
<path d="M 0,150 L 100,20 L 200,210 L 300,100 L 400,130 L 500,50"
fill="none" stroke="white" stroke-width="4"/>
</mask>
</defs>
<g mask="url(#graph)">
<rect y="0" width="500" height="60" fill="red"/>
<rect y="60" width="500" height="60" fill="blue"/>
<rect y="120" width="500" height="60" fill="green"/>
<rect y="180" width="500" height="60" fill="yellow"/>
</g>
</svg>Свободный перевод ответа от участника @Paul LeBeau.
Автор решения: Alexandr_TT
→ Ссылка
Примеры анимации
#1. Изменение аттрибута d в path
Изменяем атрибут в path маски
<svg width="500" height="240">
<defs>
<mask id="graph">
<path d="M 0,150 L 100,20 L 200,210 L 300,100 L 400,130 L 500,50"
fill="none" stroke="white" stroke-width="8">
<animate
attributeName="d"
begin="0s"
dur="8s"
repeatCount="5"
values="M 0,150 L 100,20 L 200,210 L 300,100 L 400,130 L 500,50;
M 0,150 L 260,240 L 350,20 L 450,250 L 480,210 L 500,150;
M 0,150 L 100,20 L 200,210 L 300,100 L 400,130 L 500,50"
restart="whenNotActive"
/>
</path>
</mask>
</defs>
<g mask="url(#graph)">
<rect y="0" width="500" height="60" fill="red"/>
<rect y="60" width="500" height="60" fill="dodgerblue"/>
<rect y="120" width="500" height="60" fill="greenyellow"/>
<rect y="180" width="500" height="30" fill="yellow"/>
<rect y="210" width="500" height="30" fill="red"/
</g>
</svg>#2. Совместное изменение аттрибута d и ширины строки stroke-width
<svg width="500" height="240">
<defs>
<mask id="graph">
<path d="M 0,150 L 100,20 L 200,210 L 300,100 L 400,130 L 500,50"
fill="none" stroke="white" stroke-width="8">
<!-- Анимация изменения формы -->
<animate
attributeName="d"
begin="0s"
dur="8s"
repeatCount="5"
values="M 0,150 L 100,20 L 200,210 L 300,100 L 400,130 L 500,50;
M 0,150 L 260,240 L 350,20 L 450,250 L 480,210 L 500,150;
M 0,150 L 100,20 L 200,210 L 300,100 L 400,130 L 500,50"
restart="whenNotActive"
/>
<!-- Анимация изменения ширины строки -->
<animate
attributeName="stroke-width"
begin="0s"
dur="8s"
repeatCount="5"
values="4;20;4"
restart="whenNotActive"
/>
</path>
</mask>
</defs>
<g mask="url(#graph)">
<rect y="0" width="500" height="60" fill="red"/>
<rect y="60" width="500" height="60" fill="dodgerblue"/>
<rect y="120" width="500" height="60" fill="greenyellow"/>
<rect y="180" width="500" height="30" fill="yellow"/>
<rect y="210" width="500" height="30" fill="red"/
</g>
</svg>#3. Маска имеет форму спирали и анимируется рост спирали
<!-- https://ru.stackoverflow.com/a/745795/28748 -->
<style>
</style>
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="50%" heihgt="50%" viewBox="0 150 744 1052" id="svg2" version="1">
<text x="60" y="200" font-size="40"> Click me </text>
<defs>
<mask id="msk1">
<!-- Маска в форме спирали -->
<path id="spiral" stroke-dashoffset="6265" stroke-dasharray="6265" d="m351 487c0 8-11 4-14-1-6-11 4-24 15-27 19-5 37 11 40 30 4 27-18 50-44 53-35 4-64-25-66-59-3-42 32-77 73-79 50-3 90 39 92 88 2 57-46 104-102 105-65 2-117-53-119-117-1-72 60-131 131-132 80-1 144 67 145 146 1 87-74 158-160 158-95 0-171-81-171-175 0-102 88-185 190-184 110 1 198 95 197 204C557 615 456 709 340 708 215 706 115 598 117 475 119 342 233 236 364 238 504 240 616 361 614 500 611 648 484 766 337 763 182 760 58 626 61 472 65 309 206 179 367 183c170 4 306 151 302 320-4 178-158 319-335 315" stroke-linecap="round" fill="black" stroke="white" stroke-width="28">
<!-- Анмация path маски -->
<animate attributeName="stroke-dashoffset" values="6265;0" begin="svg2.click" dur="20s" fill="freeze" restart="whenNotActive" repeatCount="indefinite" />
</path>
</mask>
<!-- Многоцветный радиальный градиент для фона -->
<radialGradient id="rg" r=".9">
<stop offset="0%" stop-color="dodgerblue"></stop>
<stop offset="10%" stop-color="gold"></stop>
<stop offset="20%" stop-color="orangered"></stop>
<stop offset="30%" stop-color="yellowgreen"></stop>
<stop offset="40%" stop-color="purple"></stop>
<stop offset="50%" stop-color="greenyellow"></stop>
<stop offset="60%" stop-color="orange"></stop>
<stop offset="70%" stop-color="skublue"></stop>
<stop offset="80%" stop-color="dodgerblue"></stop>
<stop offset="90%" stop-color="#000"></stop>
<stop offset="100%" stop-color="dodgerblue"></stop>
</radialGradient>
</defs>
<!-- Анимация красного шарика на конце растущей спирали -->
<circle cx="-20" cy="0" r="20" fill="red" >
<animateMotion id="an" dur="20s" repeatCount="indefinite" rotate="auto-reverse" begin="svg2.click" fill="freeze" restart="whenNotActive">
<mpath xlink:href="#spiral"/>
</animateMotion>
</circle>
<rect width="100%" height="100%" fill="url(#rg)" mask="url(#msk1)" />
</svg>
</div>