maskUnits&maskContentUnits属性会影响遮罩的位置吗? [英] How do maskUnits & maskContentUnits attributes affect mask positioning?

问题描述

我已阅读 SVG遮罩元素的规范，但对我而言尚不清楚 maskUnits 和 maskContentUnits 上的部分，以及它们之间如何相互影响也不清楚.

I've read a bit of the spec for the SVG mask element but the sections on maskUnits and maskContentUnits aren't clear to me, and also how they affect each other isn't clear to me.

根据规格:

maskUnits ='userSpaceOnUse':x，y，宽度和高度表示在引用mask元素时当前用户坐标系中的值.

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，宽度和高度表示要应用蒙版的元素的对象边界框的分数或百分比.

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':遮罩元素内容的用户坐标系是引用遮罩元素时所在的当前用户坐标系.

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':坐标系的原点位于剪切路径所应用于的元素的边界框的左上角，并且该边界的宽度和高度相同框.

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示例和 maskContentUnits示例在MDN上，但是每当我更改时任何意外的事情都会发生，例如整个元素消失或似乎没有应用遮罩.

I've tried editing the maskUnits example and maskContentUnits example on MDN but whenever I change anything something unexpected happens, like the whole element disappears or the mask doesn't seem to be applied.

下面的代码段是一个沙箱，其中包含一些令人困惑的行为的示例.我希望所有的正方形看起来都不同，但是每对有2对相同，而其中一对看上去根本没有套用掩模:

The snippet below is a sandbox with a few examples of the confusing behavior. I'd expect all of the squares to look different but there are 2 pairs each that are identical, and one of the pairs look like no mask was applied at all:

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

推荐答案

我们知道日常生活中的单位是英寸，英里，公里等.

We know what units are in ordinary life, there are inches, miles, kilometers etc.

一英寸等于一公里.如果您绘制一幅很小的图片，跨度为1英寸，然后在其周围放置2英寸的边框，那么将边框跨度为2公里，则图片本身不会改变.同样，更改图片大小不会更改图片框内可见的内容，除非图片框对于图片而言太小.

One inch is not the same as one kilometre. If you draw a tiny picture, one inch across and you put a frame round it 2 inches across, the picture itself won't change if we make the frame 2 kilometres across. Equally, changing the picture size doesn't change how much is visible inside the picture frame unless the frame is too small for the picture.

maskUnits影响图片(蒙版)帧的单位，maskContentUnits影响图片(蒙版)的单位.

maskUnits affect the units of the picture (mask) frame, maskContentUnits affect the units of the picture (mask).

objectBoundingBox单元被定义为0是蒙版形状的左侧，而1是右侧.

objectBoundingBox units are defined such that 0 is the left side of the masked shape and 1 is the right side.

userSpaceOnUse单元使用与遮罩形状本身相同的坐标系.如果您要遮盖一个范围从50到100的矩形，那么如果您想遮盖整个矩形，您的遮罩也应该覆盖该区域.

userSpaceOnUse units use the same co-ordinate system as the masked shape itself. If you mask a rect which extends from 50-100 then your mask ought to cover that area too if you want to mask the entire rect.

如果您在两个方向上以距原点100公里为中心绘制半径为100公里的半径的圆，则查看从原点开始的1毫米宽的正方形，在绘制所有内容时，该正方形上将没有任何内容在那个区域之外.

If you draw a circle with a radius of 100 kilometres centred 100 kilometres from the origin in both directions, then look at a square 1 millimetre across that starts at the origin, that square will have nothing drawn on it as everything is drawn outside that area.

我们正在掩盖

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

所以我们的蒙版的x，y，宽度和高度即为

So our mask's x, y, width and height i.e.

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

如果我们想掩盖该形状，则需要覆盖相同(或更多)区域.

need to cover the same area (or more) if we want to mask that shape and they do.

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

If we had maskUnits="objectBoundingBox" we'd need

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

使用100作为宽度和高度将使遮罩的大小是所需大小的100倍，但是除了浪费大量内存之外，它没有可见的效果.

Using 100 for the width and height would make the mask 100 times the size it needs to be but other than wasting lots of memory, it has no visible effect.

maskContentUnits对于遮罩的内容(即

maskContentUnits work the same for the mask's content i.e.

<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而言太大了，因此遮罩是一种颜色，因为形状在您可以看到的区域之外，即形状上方的区域.

Either they need to be 0..1 for objectBoundingBox or 0..100 for the shape. Since they are far too big for objectBoundingBox the mask is all one colour as the shapes are outside the area you can see i.e. the area over the shape.

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

这篇关于maskUnits&maskContentUnits属性会影响遮罩的位置吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！