html - maskUnits 和 maskContentUnits 属性如何影响蒙版定位？

Question

我读了一点 the spec for the SVG mask element但是关于 maskUnits 和 maskContentUnits 的部分我不清楚，而且我也不清楚它们如何相互影响。

来自规范:

maskUnits = 'userSpaceOnUse': x, y, width and height represent values in the current user coordinate system in place at the time when the mask element is referenced.

maskUnits = 'boundingBox': x, y, width and height represent fractions or percentages of the object bounding box of the element to which the mask is applied.

maskContentUnits = 'userSpaceOnUse': The user coordinate system for the contents of the mask element is the current user coordinate system in place at the time when the mask element is referenced.

maskContentUnits = 'boundingBox': The coordinate system has its origin at the top left corner of the bounding box of the element to which the clipping path applies to and the same width and height of this bounding box.

我试过编辑 maskUnits example和 maskContentUnits example在 MDN 上，但每当我更改任何内容时，都会发生意想不到的事情，例如整个元素消失或似乎未应用 mask 。

下面的代码片段是一个沙箱，其中包含一些令人困惑的行为示例。我希望所有的方 block 看起来都不一样，但有 2 对每对都是相同的，其中一对看起来根本没有蒙版:

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 20px 0 0 20px;
}

.hidden {
  width: 0;
  height: 0;
  margin: 0;
}

svg {
  width: 100px;
  height: 100px;
  margin: 0 20px 20px 0;
  display: block;
}

p {
  margin-bottom: 10px;
  font-family: monospace;
}

<!-- mask definitions -->
<svg viewBox="0 0 100 100" class="hidden">
  <mask
    id="usou-usou"
    maskUnits="userSpaceOnUse"
    maskContentUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="100"
    height="100"
  >
    <rect x="0" y="0" width="100" height="100" fill="white" />
    <circle cx="50" cy="50" r="25" fill="black" />
  </mask>
  
  <mask
    id="usou-obb"
    maskUnits="userSpaceOnUse"
    maskContentUnits="objectBoundingBox"
    x="0"
    y="0"
    width="100"
    height="100"
  >
    <rect x="0" y="0" width="100" height="100" fill="white" />
    <circle cx="50" cy="50" r="25" fill="black" />
  </mask>
  
  <mask
    id="obb-usou"
    maskUnits="objectBoundingBox"
    maskContentUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="100"
    height="100"
  >
    <rect x="0" y="0" width="100" height="100" fill="white" />
    <circle cx="50" cy="50" r="25" fill="black" />
  </mask>
  
  <mask
    id="obb-obb"
    maskUnits="objectBoundingBox"
    maskContentUnits="objectBoundingBox"
    x="0"
    y="0"
    width="100"
    height="100"
  >
    <rect x="0" y="0" width="100" height="100" fill="white" />
    <circle cx="50" cy="50" r="25" fill="black" />
  </mask>
</svg>

<p>maskUnits = userSpaceOnUse &<br> maskContentUnits = userSpaceOnUse</p>
<svg viewBox="0 0 100 100">
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    mask="url(#usou-usou)"
  />
</svg>

<p>maskUnits = userSpaceOnUse &<br> maskContentUnits = objectBoundingBox</p>
<svg viewBox="0 0 100 100">
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    mask="url(#usou-obb)"
  />
</svg>

<p>maskUnits = objectBoundingBox &<br> maskContentUnits = userSpaceOnUse</p>
<svg viewBox="0 0 100 100">
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    mask="url(#obb-usou)"
  />
</svg>

<p>maskUnits = objectBoundingBox &<br> maskContentUnits = objectBoundingBox</p>
<svg viewBox="0 0 100 100">
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    mask="url(#obb-obb)"
  />
</svg>

Answer 1

我们知道日常生活中的单位是什么，有英寸、英里、公里等。

一英寸不等同于一公里。如果你画了一张小图，一英寸宽，你在它周围放了一个 2 英寸宽的框，即使我们把框宽 2 公里，图片本身也不会改变。同样，更改图片大小不会改变相框中可见的内容，除非相框对于图片而言太小。

maskUnits 影响图片( mask )帧的单位，maskContentUnits 影响图片( mask )的单位。

objectBoundingBox 单元被定义为 0 是屏蔽形状的左侧，1 是右侧。

userSpaceOnUse 单位使用与蒙版形状本身相同的坐标系。如果您遮盖了从 50-100 延伸的矩形，那么如果您想遮盖整个矩形，您的 mask 也应该覆盖该区域。

如果你在距离原点 100 公里的两个方向上绘制一个半径为 100 公里的圆，然后看一个从原点开始的 1 毫米宽的正方形，这个正方形上什么也没有画，因为一切都被绘制了在那个区域之外。

我们在掩饰

<rect x="0" y="0" width="100" height="100"/>

所以我们的掩码的 x、y、宽度和高度即

<mask maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"/>

如果我们想遮盖那个形状，则需要覆盖相同的区域(或更多)，而他们确实这样做了。

如果我们有 maskUnits="objectBoundingBox"我们需要

<mask maskUnits="objectBoundingBox" x="0" y="0" width="1" height="1"/>

使用 100 的宽度和高度会使蒙版的大小达到所需大小的 100 倍，但除了浪费大量内存外，它没有任何可见的效果。

maskContentUnits 对 mask 内容的作用相同，即

<rect x="0" y="0" width="100" height="100" fill="white" />
<circle cx="50" cy="50" r="25" fill="black" />

objectBoundingBox 需要 0..1 或形状需要 0..100。由于它们对于 objectBoundingBox 来说太大了，所以蒙版都是一种颜色，因为形状在您可以看到的区域之外，即形状上方的区域。

<!-- mask definitions -->
<svg viewBox="0 0 100 100" class="hidden">
  <mask
    id="usou-usou"
    maskUnits="userSpaceOnUse"
    maskContentUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="100"
    height="100"
  >
    <rect x="0" y="0" width="100" height="100" fill="white" />
    <circle cx="50" cy="50" r="25" fill="black" />
  </mask>
  
  <mask
    id="usou-obb"
    maskUnits="userSpaceOnUse"
    maskContentUnits="objectBoundingBox"
    x="0"
    y="0"
    width="100"
    height="100"
  >
    <rect x="0" y="0" width="1" height="1" fill="white" />
    <!-- if we wanted the same mask as above it would be r="0.25" -->
    <circle cx=".5" cy=".5" r=".1" fill="black" />
  </mask>
  
  <!-- have the mask cover only the top left quarter of the shape -->
  <mask
    id="obb-usou"
    maskUnits="objectBoundingBox"
    maskContentUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="0.5"
    height="0.5"
  >
    <rect x="0" y="0" width="100" height="100" fill="white" />
    <circle cx="50" cy="50" r="25" fill="black" />
  </mask>
  
  <!-- have the mask cover only the top left quarter of the shape -->
  <mask
    id="obb-obb"
    maskUnits="objectBoundingBox"
    maskContentUnits="objectBoundingBox"
    x="0"
    y="0"
    width="0.5"
    height="0.5"
  >
    <rect x="0" y="0" width="1" height="1" fill="white" />
    <!-- if we wanted the same mask as above it would be r="0.25" -->
    <circle cx=".5" cy=".5" r=".1" fill="black" />
  </mask>
</svg>

<p>maskUnits = userSpaceOnUse &<br> maskContentUnits = userSpaceOnUse</p>
<svg viewBox="0 0 100 100">
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    mask="url(#usou-usou)"
  />
</svg>

<p>maskUnits = userSpaceOnUse &<br> maskContentUnits = objectBoundingBox</p>
<svg viewBox="0 0 100 100">
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    mask="url(#usou-obb)"
  />
</svg>

<p>maskUnits = objectBoundingBox &<br> maskContentUnits = userSpaceOnUse</p>
<svg viewBox="0 0 100 100">
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    mask="url(#obb-usou)"
  />
</svg>

<p>maskUnits = objectBoundingBox &<br> maskContentUnits = objectBoundingBox</p>
<svg viewBox="0 0 100 100">
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    mask="url(#obb-obb)"
  />
</svg>