Изменение градиента SVG с помощью JS - PullRequest
Новая
       31

Изменение градиента SVG с помощью JS

0 голосов
/ 10 октября 2019

Я пытаюсь изменить цвет остановки градиента в следующем элементе SVG, пытаясь изменить атрибут stop-color, но он не работает: 

<svg><defs> 
<linearGradient gradientTransform="rotate(90)">
<stop offset="40%" stop-color="purple" id="firstGradient"/>
<stop offset="100%" stop-color="red" id="secondGradient"/>
</linearGradient>
</defs>
<Here's a long line of picture>
</svg>

Я используюследующий сценарий, чтобы попытаться изменить цвет остановки: 

document.getElementById("firstGradient").stopColor ="red";

Я также пытался document.getElementById("firstGradient").attr.stop-color = "red";.

Ни один из подходов не работает. Как изменить цвет стопа?

Ответы [ 2 ]

1 голос
/ 10 октября 2019

Ошибка, которую вы делаете, предполагает: я не уверен, какой ресурс (ы) вы используете для справки, - это то, что для любого объекта, возвращаемого document.getElementByid("firstGradient"), определено свойство stopColor. Нет.

Элемент, который вы называете "firstGradient", является SVGStopElement, и, как вы можете видеть из спецификации, он не предоставляет никакого свойства stopColor.

Но нет причин для беспокойства - изменяя фактический атрибут элемента, вы меняете стоп-цвет, именно так работает объектная модель документа - вам вообще не нужно использовать какие-либо специальные свойства элемента дляизменить фактический атрибут: 

document.getElementById("firstGradient").setAttribute("stop-color", "red");

Вот и все. setAttribute Функция доступна для любого элемента документа, SVG, HTML или любого другого пространства имен / вида.

Кстати, я бы не стал называть стоп-цвета градиентами - вызывая вызываемый вами элемент«firstGradient» просто вводит в заблуждение - это стоп-цвет , а не градиент , градиент является фактическим linearGradient элементом. Поэтому, если вы хотите назначить идентификаторы, присвойте «GradientFirstStopColor» и «GradientSecondStopColor» первому и второму stop элементам, соответственно, если что угодно.

Но вы также можете просто определить элементы стоп-цвета, используя ихПорядок в дочерней иерархии: 

document.querySelector("linearGradient > stop:nth-of-type(1)").setAttribute("stop-color", "red");

Вы можете использовать другие селекторы CSS или API (например, querySelectorAll("linearGradient > stop")[1]), я хочу сказать, что вам не нужно абсолютно прибегать к назначению идентификаторов, хотя это помогает в некоторых случаях. ситуации - у них абсолютно законное использование.

Конечно, использование свойства style в элементе stop также работает, но я лично считаю, что семантика наличия style для неотрисованных объектов (градиенты не используются). Стихияй сам) Стихия - помешательство - подтекающая абстракция, в основном.

0 голосов
/ 10 октября 2019

Вы пробовали это с: 

document.getElementById("firstGradient").style.stopColor ="red";
...