Могу ли я конвертировать SVGLength между разными типами единиц? - PullRequest
Новая
       59

Могу ли я конвертировать SVGLength между разными типами единиц?

0 голосов
/ 16 июня 2020

Ниже у меня есть тестовый SVG.

Если я проверю myGradient3, я увижу этот element.cx.baseVal = {unitType: 2, value: 30, valueInSpecifiedUnits: 75, valueAsString: 75%}. Если я посмотрю на документацию по радиальным градиентам в Mozilla, у меня сложится впечатление, что разрешены все типы единиц SVGLength.

Я пытаюсь установить cx в инспекторе элементов на 30, чтобы увидеть, изменится ли unitType. Оно делает! element.cx.baseVal теперь {unitType: 1, value: 30, valueInSpecifiedUnits: 30, valueAsString: "30"}

Значение то же самое. Я бы подумал, что рендеринг не изменился бы. Но это действительно меняется. Красивое золотое пятно на моем круге исчезло. 

<svg viewBox="0 0 40 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="myGradient1">
      <stop offset="25%" stop-color="gold"></stop>
      <stop offset="75%" stop-color="red"></stop>
    </radialGradient>
    <radialGradient id="myGradient2" fr="40%" r="50%">
      <stop offset="25%" stop-color="gold"></stop>
      <stop offset="75%" stop-color="red"></stop>
    </radialGradient>
    <radialGradient id="myGradient3" cx="75%" cy="25%">
      <stop offset="25%" stop-color="gold"></stop>
      <stop offset="75%" stop-color="red"></stop>
    </radialGradient>
    <radialGradient id="myGradient4" fx="75%" fy="25%">
      <stop offset="25%" stop-color="gold"></stop>
      <stop offset="75%" stop-color="red"></stop>
    </radialGradient>
  </defs>

  <!-- using my radial gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient1')"></circle>
  <circle cx="15" cy="5" r="4" fill="url('#myGradient2')"></circle>
  <circle cx="25" cy="5" r="4" fill="url('#myGradient3')"></circle>
  <circle cx="35" cy="5" r="4" fill="url('#myGradient4')"></circle>
</svg>

Вот мои вопросы:

  • Почему линейный градиент отображается по-другому после моего изменения, когда свойство value cx имеет не изменено?
  • Есть ли какой-либо метод, с помощью которого я могу переводить между различными типами единиц (%, мм, px, ...), не влияя на рендеринг? Как видите, моя попытка сделать это провалилась.
...