How to fill an SVG mask with a color instead of an image?

Question

css

Friends, there is an SVG mask with a picture. How can instead of a picture, just fill it with one color?

<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>

Here is a live example https://codepen.io/Cheizer/pen/xxKvyzb

Answer 1

You do not apply an element to a mask, but vice versa - a mask to an element. Therefore, just draw the figure you need instead of the picture and apply a mask to it (actually, you already have this rect right in the mask):