Question

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

通过我的代码段你会更好地理解：

＆＃13;

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

＆＃13;

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

＆＃13;

它现在正在使用chrome，但translateX（或translate）在firefox和edge中不起作用。我尝试使用转换SVG属性，但似乎我无法使用百分比值。我不熟悉视图框，但我不确定它会对这种情况有所帮助。

非常感谢您提供任何帮助！

Answer 1

这是实现您想要的一种方式，而不依赖于新单位或calc()。它也应该是跨浏览器兼容的。

工作原理：

我们将三角形包装在嵌套的SVG中。我们使用SVG，因为它具有可以占用百分比的x属性。
我们将此嵌套SVG定位在x="50%"。它现在以面具为中心（粗略地，见下一步）。
我们移动三角形，使其以x = 0为中心。这样就不会偏离面具的中心。
我们在嵌套的SVG上设置overflow="visible"，因此现在位于SVG左侧的三角形部分（即x <0）不会被剪裁。

＆＃13;

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

＆＃13;

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

＆＃13;

居中SVG蒙版的一个元素

1 个答案: