SVG元素transform缩放后作为遮罩图像实例页面

展示

代码

• HTML：

  <!-- transform缩放实现 -->
  <svg width="0" height="0" style="position: absolute;">
      <mask id="mask">
          <ellipse transform="scale(5.12, 3.84)" cx="25" cy="25" rx="20" ry="10" fill="white"></ellipse>
          <rect transform="scale(5.12, 3.84)" x="15" y="5" width="20" height="40" rx="5" ry="5" fill="white"></rect>
      </mask>
  </svg>
  <svg width="256" height="192">
      <image xlink:href="1.jpg" class="mask-image" width="256" height="192"></image>
  </svg>

• CSS：

  .mask-image {
      mask: url(#mask);
  }