Заливка SVG полосками

Question

[Назар Мокринский]

Для построения графиков используется morris.js, но заливка части, которая под графиком — сплошной цвет. Есть ли возможность сделать заливку полосатой, чтобы чередовались два цвета равными интервалами под 45 градусов?
Цель — получить что-то максимально похожее на:

Как вариант принимаются альтернативные библиотеки, которые умеют такое изначально.

Answer 1

[Stdit]

Patterns?

Comments

[Назар Мокринский]

Похоже, но, честно говоря, ожидал увидеть что-то более удобное.

[Stdit]

— куда ещё удобнее-то?

<?xml version="1.0" standalone="no"?>
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <pattern id="Pattern" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect x="0" y="0" width="10" height="10" fill="red"/>
        <polygon points="5,0 10,0 10,5" fill="yellow"/>
        <polygon points="0,0 10,10 5,10 0,5" fill="yellow"/>
    </pattern> 
  </defs>
  
  <polygon fill="url(#Pattern)" points="0,0 100,50 200,25 300,50 400,0 500, 100, 0,100"/>
</svg>

jsfiddle.net/F54wQ/

Answer 2

[BaNru]

CSS градиенты?

Comments

[Назар Мокринский]

Честно говоря не знаю как из применять в даном случае. Пробовал, как в html — не получилось.

[BaNru]

И правда, SVG не поддерживает CSS градиенты :-(