Как SVG маску залить цветом вместо рисунка?

Question

[Cheizer]

Друзья, есть SVG маска с рисунком. Как можно вместо рисунка, просто залить одним цветом?

<div class="wrap">
<svg viewbox="0 0 10 6.7" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="myMask" x="0" y="0">
      <rect x=0 y=0 width="10" height="6.7" fill="white"></rect>
      <circle cx="0.1" cy="0.1" r="1" fill="black"></circle>
      <circle cx="10" cy="0.1" r="1" fill="black"></circle>
      <circle cx="0" cy="6.7" r="1" fill="black"></circle>
      <circle cx="10" cy="6.7" r="1" fill="black"></circle>
    </mask>
  </defs>
  <image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" width="10" height="6.7" mask="url(#myMask)"/>
</svg>
</div>

Вот живой пример https://codepen.io/Cheizer/pen/xxKvyzb

Answer 1

[Rustam Bainazarov]

Вы не элемент к маске применяете, а наоборот — маску к элементу. Засим, просто нарисуйте вместо картинки нужную вам фигуру и примените к ней маску (собственно, у вас уже есть этот rect прямо в маске и есть):

Comments

[Cheizer]

Благодарю!