Можно ли запустить / остановить SVG-градиенты в определенной абсолютной позиции? - PullRequest
Новая
       15

Можно ли запустить / остановить SVG-градиенты в определенной абсолютной позиции?

1 голос
/ 13 марта 2019

Я создаю в Javascript различные L-образные пути .Они различаются по длине и положению.Я хотел бы иметь линейный градиент в качестве обводки для них, где первое смещение остановки находится в положении x = 10 пикселей, т.е. изменение цвета всегда начинается после x пикселей.

Используя градиент стандартным способомпросто предлагает относительное позиционирование (например, относительно ограничивающего прямоугольника объекта).Это приводит к различным смещениям остановки из-за разных ограничивающих рамок объекта.

Вот один пример того, как это выглядит: 

  path.p1 {
    fill: none;
    stroke-width: 20px;
  }
<svg height="600" width="1000">


  <path class="p1" d="M10 10 V 100 H 100 " stroke="url(#cl1)"/>
  <path class="p1" d="M150 10 V 100 H 200 " stroke="url(#cl1)"/>
  <path class="p1" d="M250 10 V 100 H 400 " stroke="url(#cl1)"/>

    <defs>
        <linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0" style="stop-color:grey;stop-opacity:1" />
            <stop offset="0.02" style="stop-color:grey;stop-opacity:1" />
            <stop offset="0.15" style="stop-color:orange;stop-opacity:1" />
            <stop offset="0.2" style="stop-color:orange;stop-opacity:1" />
        </linearGradient>
    </defs>
  
</svg>

Есть ли способ использовать один градиент, но умный способ ссылаться на него через вложенность SVG или javascript?

1 Ответ

1 голос
/ 13 марта 2019

Используйте gradientUnits="userSpaceOnUse". Таким образом, градиент позиционируется в абсолютных единицах, но всегда в локальной системе координат элемента, для которого он определен.

В вашем случае наличие всех путей в одной и той же системе координат означало бы, что вы определили общий градиент, охватывающий все пути. Чтобы избежать этого, вы должны изменить это, например, определив атрибут transform. Каждый последовательный путь перемещается вправо, а его начальная точка, измеренная в локальной системе координат , остается на том же месте. 

  path.p1 {
    fill: none;
    stroke-width: 20px;
  }
<svg height="600" width="1000">


  <path class="p1" d="M10 10 V 100 H 100 " stroke="url(#cl1)"/>
  <path class="p1" d="M10 10 V 100 H 60 " stroke="url(#cl1)" transform="translate(140)"/>
  <path class="p1" d="M10 10 V 100 H 160 " stroke="url(#cl1)" transform="translate(240)"/>

    <defs>
        <linearGradient id="cl1" gradientUnits="userSpaceOnUse" x1="10" y1="0" x2="110" y2="0">
            <stop offset="0" style="stop-color:grey;stop-opacity:1" />
            <stop offset="0.02" style="stop-color:grey;stop-opacity:1" />
            <stop offset="0.15" style="stop-color:orange;stop-opacity:1" />
            <stop offset="0.2" style="stop-color:orange;stop-opacity:1" />
        </linearGradient>
    </defs>
  
</svg>
...