居中 SVG 蒙版的元素

Question

我是 SVG 的新手，所以这可能是一个简单的问题。我正在尝试制作一个在矩形内具有简单三角形形状的 SVG 蒙版。我想要实现的是让矩形响应他的宽度，但三角形应该 - 获得固定尺寸 - 始终位于视口的中心

用我的 sn-p 你会更好理解的：

.header-arrow {
  height: 70px;
}
svg {
  height: inherit;
}
#arrow-down-alpha {
  transform: translateX(calc(50vw - 130px/2));
}

<div class="header-arrow">
  <svg width="100%">
    <defs>
      <mask id="myMask" x="0" y="0" width="100%" height="100%">
        <rect fill="white" x="0" y="0" width="100%" height="100%" />
        <polygon id="arrow-down-alpha" fill="black" x="00" y="0" width="165px" height="100%" points="55.91 37.8 111.81 0 0 0 55.91 37.8" />
      </mask>
    </defs>

    <rect id="base-mask" mask="url(#myMask)" x="0" y="0" width="100%" height="100%" />
  </svg>
</div>

它现在在 chrome 中工作，但 translateX（或翻译）在 firefox 和 edge 中不工作。我尝试使用 transform SVG 属性，但似乎无法使用百分比值。 我对视图框不是很熟悉，但我不确定它在这种情况下是否会有所帮助。

感谢任何帮助！

Answer 1

这是一种无需依赖新单位或calc() 即可实现所需目标的方法。它也应该是跨浏览器兼容的。

它是如何工作的：

1. 我们将三角形包裹在嵌套的 SVG 中。我们使用 SVG 是因为它有一个可以取百分比的 x 属性。

2. 我们将这个嵌套的 SVG 定位在 x="50%"。它现在位于蒙版的中心（大致，请参见下一步）。

3. 我们移动三角形，使其以 x=0 为中心。这样它就不会偏离蒙版的中心。

4. 我们在嵌套的 SVG 上设置了 overflow="visible"，因此现在离开 SVG 左侧的三角形部分（即 x

.header-arrow {
  height: 70px;
}
svg {
  height: inherit;
}

<div class="header-arrow">
  <svg width="100%">
    <defs>
      <mask id="myMask" x="0" y="0" width="100%" height="100%">
        <rect fill="white" x="0" y="0" width="100%" height="100%" />
        <svg x="50%" overflow="visible">
          <polygon fill="black" points="0 38 56 0 -56 0" />
        </svg>
      </mask>
    </defs>

    <rect id="base-mask" mask="url(#myMask)" x="0" y="0" width="100%" height="100%" />
  </svg>
</div>