Градиент SVG не виден
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Livello_1' x='0px' y='0px' viewBox='0 0 150 100' xml:space='preserve'>
<defs>
<linearGradient id='gradient1' x1='0' y1='25' x2='0' y2='50' gradientUnits='userSpaceOnUse'>
<stop stop-color='#cd62db' offset='0'></stop>
<stop stop-color='#0c2e89' offset='1'></stop>
</linearGradient>
</defs>
<polyline style='fill=: url(#gradient1)' fill-opacity='0.1' stroke='#0c2e89'
stroke-width='1' points='0 150 0,83 1,84 2,77 3,76 4,79 6,79 7,76 8,77 9,75 10,77 12,79 13,82 14,86 15,90 16,89 18,90 19,96 20,97 21,90 22,93 24,96 25,87 26,96 27,95 28,82 30,82 31,87 32,83 33,90 34,87 36,100 37,95 38,97 39,96 40,91 42,91 43,80 44,73 45,75 46,74 48,83 49,86 50,83 51,74 52,81 54,86 55,75 56,77 57,86 58,84 60,87 61,94 62,93 63,89 64,86 66,86 67,87 68,88 69,88 70,95 150 100 Z'/>
<text font-family='Segoe UI' font-size='24' x='90' y='20'> 98%</text>
</svg>Я пытаюсь применить градиентную заливку к диаграмме областей, но это не работает.
Опечатка: style='fill=: url(#gradient1)'. А еще у вас есть fill-opacity='0.1'
Не могли бы вы исправить код и поделиться. Спасибо. Я попробовал предложенные изменения, но градиент не применился.
@RobertLongson Спасибо. Я хочу применить градиент к области диаграммы вместо текста.
Это еще не все
Как говорят Роберт и Эксанета; у тебя 2 ошибки. Удалите fill-opacity и измените все значения градиента x=y, чтобы покрыть полилинию.
Я не уверен в комментариях. Я удалил из кода «заливку-непрозрачность». Не могли бы вы уточнить, где требуется x = y. Пожалуйста, поделитесь образцом
y1='25' и y2='50' неверны. Отрегулируйте значения, чтобы охватить то место, где вы хотите иметь градиент.
Спасибо, Роберт. LinearGradient не работает для области под линией. Он не отражает никакого цвета. Я пытался изменить значения y1 и y2 соответственно, но безуспешно. Если кто-то попробует с вашей стороны и поделится кодом, это будет большой помощью.
Ответы 1
Второе число в атрибуте точек — 150. Это сбивает с толку, поскольку градиент заканчивается на 50 единиц ниже нижнего края SVG. Изменение этого значения на 100 и создание объекта GradientUnitsBoundingBox (по умолчанию) будет иметь больше смысла.
Я также удалил непрозрачную заливку, потому что изначально было очень трудно увидеть градиент.
<svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 150 100" style = "height: 100vh;">
<defs>
<linearGradient id = "gradient1" x1 = "0" y1 = "0" x2 = "0" y2 = "1"
gradientUnits = "objectBoundingBox">
<stop stop-color = "#cd62db" offset = "0"/>
<stop stop-color = "#0c2e89" offset = "1"/>
</linearGradient>
</defs>
<polyline fill = "url(#gradient1)" stroke = "#0c2e89" stroke-width = "1"
points = "0 100 0,83 1,84 2,77 3,76 4,79 6,79 7,76 8,77 9,75 10,77 12,79 13,82 14,86 15,90 16,89 18,90 19,96 20,97 21,90 22,93 24,96 25,87 26,96 27,95 28,82 30,82 31,87 32,83 33,90 34,87 36,100 37,95 38,97 39,96 40,91 42,91 43,80 44,73 45,75 46,74 48,83 49,86 50,83 51,74 52,81 54,86 55,75 56,77 57,86 58,84 60,87 61,94 62,93 63,89 64,86 66,86 67,87 68,88 69,88 70,95 150 100 Z"/>
<text font-family = "Segoe UI" font-size = "24" x = "90" y = "20"> 98%</text>
</svg>Спасибо за вашу помощь и хорошее объяснение. Это отлично работает.
Ваш градиент находится не в том же месте, что и ваш текст.