个人中心
gpt4 book ai didi

html - 在 html5 中使用 svg 蒙版剪切照片的矩形区域

转载 作者：太空宇宙 更新时间：2023-11-04 03:58:17 27 4
gpt4 key购买 nike

我的目标是在 html5 中使用 svg 蒙版剪切照片的矩形区域。我试图使用下面的代码和这个 fiddle 中的代码来实现这个，无济于事。谁能告诉我我做错了什么？

html:

<body>
<svg id="svg-rect" width="50px" height="50px">

    <defs>

    <mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <rect width="100%" height="100%"  />
    </mask>
  </defs>
</svg>

<!--<svg id="svg-rect" width="50px" height="50px">
  <rect  width="100%" height="100%"  />
</svg>-->

<img src="https://scontent-a.xx.fbcdn.net/hphotos-prn1/t1.0-9/p235x165/75938_10152243783285987_398136218_n.jpg"/>
</body>

CSS:

img {
  mask: url(#masking);
  position:absolute;
    top:0px;
    left:0px;
}

#svg-rect{
    position:absolute;
    top:50px;
    left:60px;
    z-index:2;
}

最佳答案

将 SVG 效果应用到 HTML 只适用于 Firefox。您必须在 Chrome/Safari 中使用 -webkit-mask 并且已被弃用。接下来，您必须用一种颜色填充矩形以使蒙版生效。 firefox 中有一个错误，您必须以十进制形式在掩码中指定矩形的 x/y 偏移量，% 将不起作用。将您的 rect 定义更改为:

  <rect x=".2" y=".2" width=".25" height=".25" fill="white"  />

你会看到一个蒙版效果(仅限 Firefox)

或者...反转 mask ，使用空填充和实线描边

  <rect x="0" y="0" width="1" height="1" stroke="white" stroke-width=".4"  />

然而，为了获得最大的兼容性，最好的方法是一直使用内联 SVG，并且只使用 SVG 图像标签在 SVG 中处理图像内容。

关于html - 在 html5 中使用 svg 蒙版剪切照片的矩形区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22468765/

27 4 0
文章推荐： css - Compass 多次创建相同的 Sprite 贴图
文章推荐： python - 获取django对象的一对多集合属性的名称
文章推荐： python - 打开(文件， "wt"或 "rt")是不同的对象吗？
文章推荐： html - Bootstrap hero-unit 没有出现在网络上，可能是 z-index 错误
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com