Обновите SVG RadialGradient с css переменными - PullRequest
Новая
       42

Обновите SVG RadialGradient с css переменными

0 голосов
/ 13 февраля 2020

У меня есть изображение svg, внедренное в страницу с использованием vue -svg-inline-loader. 

<img
  svg-inline
  src="@/assets/vectors/silhouettes/body.svg"
  :style="silhouetteStyle">

SVG содержит radialGradient, который я изменил для работы с css переменными, как показано ниже 

<defs>
  <radialGradient
    id="gradient"
    gradientUnits="userSpaceOnUse"
    cx="50%"
    cy="27%"
    r="var(--radius)">
    <stop offset="0%" stop-color="var(--in-color)" />
    <stop offset="100%" stop-color="var(--out-color)" />
  </radialGradient>
</defs>

В vue я обновляю переменные css, чтобы создать динамический c градиент 

computed: {
  silhouetteStyle() {
    /* whatever the calculation of variables */
    return `--radius:${radius}; --in-color:${inColor}; --out-color:${outColor}`;
  },
},

Цвета градиента обновляются идеально, но не радиус. Я не могу найти никакого ответа о том, возможно ли это.

-EDIT-

Вот демонстрация codesandbox для иллюстрации вещь. Как видите, цвета меняются, но не радиус

...