Как масштабировать и двигать маску?

Question

[wizzzart]

Помогите пожалуйста разобраться с маской и заливкой.
Имеется прямоугольник, который необходимо залить паттерном (красными полосками).
Затем на этот прямоугольник нужно наложить маску. Фигура маски больше прямоугольника.



1. Можно ли масштабировать маску или хотя бы сдвинуть ее, чтобы она накладывалась от нижнего правого угла?
2. Можно ли это сделать кроссбраузерно? Код который я написал, не работает в хроме и опере, а в Edge работает криво. Нормалаьно работает только в firefox и IE. В safari не проверял.
Вот код: https://codepen.io/wizzzart/pen/OjoBeQ

Comments

[Максим Тимофеев]

Вот код: https://codepen.io/wizzzart/pen/OjoBeQ

яша: не работает

[wizzzart]

не работает в хроме и опере, а в Edge работает криво. Нормалаьно работает только в firefox и IE. В safari не проверял

Answer 1

[paramid]

HTML

<svg>
   <defs>
      <pattern id="lines-pattern_red"
         x="0" y="0" width="11" height="40"
         patternUnits="userSpaceOnUse"
         patternTransform="rotate(45)">
         <g>
            <rect x="0" y="0" width="6" height="40" fill="#ef3f37" />
            <rect x="6" y="0" width="5" height="40" fill="#ffffff" />
         </g>
      </pattern>
      <clipPath id="clip-triangle">
         <polygon points="30 0,1400 0,1400 60, 1370 90, 0 1400,0 30" />
      </clipPath>
   </defs>
</svg>
<svg viewBox="0 0 1400 90" >
   <rect class="svg-rect" x="0" y="0" width="100%" height="100%"  fill="url(#lines-pattern_red)" />
</svg>

CSS
.svg-rect { clip-path: url(#clip-triangle); }

Comments

[wizzzart]

Нечеловеческое спасибо тебе, добрый человек.

[paramid]

wizzzart: не за что :)

[wizzzart]

Владислав: Хотя немного я поторопился. Ваш пример идеален, когда маска и объект совпадают по размерам и пропорциям. А как быть если размеры, а главное пропорции не совпадают. Можно ли использовать эту же маску?

[paramid]

wizzzart: а там уже нужно с размерами подгонять,

<polygon points="30 0,1400 0,1400 60, 1370 90, 0 1400,0 30" />

- эти поинты можно считать процентами, если вьюбокс вот такой <svg viewBox="0 0 100 100" > т.е поинты будут примерно такими

<polygon points="30 0,100 0,100 60, 93 100, 0 100,0 30" />

, но это всё будет работать если размеры паттерна правильные, а у вас они для <svg viewBox="0 0 1400 90" > написаны.

[wizzzart]

Теоретически понятно. Попробую применить. Спасибо.

[wizzzart]

Все равно не могу до конца разобраться...
А в этом примере: https://codepen.io/wizzzart/pen/ayRLOR можно применить #clipping к паттерну, чтобы он зависел от текста внутри блока? То есть, чтоб тянулся и по вертикали и горизонтали?

[paramid]

wizzzart: да, напиши в скайп mih-nn (paramid который), разберемся