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

通过我的代码片段,您会更好地理解:



.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(或translation)在Firefox和Edge中不起作用。我尝试使用transform SVG属性,但似乎无法使用百分比值。
我对视图框不是很熟悉,但不确定在这种情况下是否会有所帮助。

无论如何,谢谢您的帮助!

最佳答案

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

怎么运行的:


我们将三角形包裹在嵌套的SVG中。我们使用SVG是因为它具有x属性,该属性可以使用百分比。
我们将此嵌套的SVG定位在x="50%"处。现在,它在蒙版中居中(大致请参见下一步)。
我们移动三角形,使其以x = 0为中心。这样就不会偏离蒙版的中心。
我们在嵌套的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>

关于css - 将SVG mask 的元素居中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41331733/

10-10 18:35
查看更多