Диагональные штриховки для SVG-элементов

Question

Я хочу добавить диагональные цветные штриховки к полигонам в SVG, используя CSS. Я знаю, что вы можете использовать шаблоны, но меня беспокоят проблемы с производительностью, когда слишком много различных шаблонов, поэтому я бы предпочел использовать CSS. Я нашел повторяющийся линейный градиент, но не смог заставить его работать с элементами SVG. Это возможно? Если нет, есть ли в css другие способы добавить диагональные штриховки к элементам SVG?

Answer 1

Обычно браузеры не поддерживают добавление CSS-градиентов к элементам SVG.

Вместо этого вам нужно будет использовать элементы SVG <linearGradient>.

Вот пример.

<svg width="300" height="300">
  <defs>
    <linearGradient id="hatch1"
                    gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="10" y2="10"
                    spreadMethod="repeat">
      <stop offset="0%" stop-color="transparent"/>
      <stop offset="90%" stop-color="transparent"/>
      <stop offset="90%" stop-color="green"/>
      <stop offset="100%" stop-color="green"/>
    </linearGradient>
  </defs>

  <circle cx="150" cy="150" r="100" fill="url(#hatch1)" stroke="blue"/>
</svg>