подскажите, возможно ли сделать такой круг на svg? Что бы один край имел border-radius а второй прозрачность наложенную а его цвет был градиентом
-
1Сделай 2 дуги, одну с круглым концом, другую с градиентом) – eri 16 окт '19 в 6:59
добавить комментарий
|
1 ответ
Просто наложить на него маску
https://jsfiddle.net/gzcamoed/
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<defs>
<linearGradient id="linear-gradient-1" x2="0" y2="100%">
<stop offset="0%" stop-color="#fff"/>
<stop offset="30%" stop-color="#000"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x2="0" y2="1"
gradientUnits="objectBoundingBox"
gradientTransform="rotate(135, .5, .5)">
<stop offset="0.4" stop-color="#acb5cb"/>
<stop offset="1" stop-color="#d692b3"/>
</linearGradient>
<mask id="mask">
<rect width="100%" height="100%" fill="#fff"/>
<rect x="40%" y="40%" width="60%" height="60%" fill="url(#linear-gradient-1)"/>
</mask>
</defs>
<path fill="none" stroke="url(#linear-gradient-2)"
stroke-linecap="round" stroke-width="3"
d="M37,95.7a47.54,47.54,0,1,1,13,1.8"
mask="url(#mask)"/>
</svg>