gpt4 book ai didi

css - SVG 剪辑路径不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 02:58:59 25 4
gpt4 key购买 nike

我是一名 Web 开发新手,请放轻松。我正在尝试制作美国形状的自定义形状元素。在我的 html 中,我创建了一个带有 clipPath 子元素的 svg 元素,以及一个显示它必须经过的坐标点的多边形元素子元素,但它没有显示。下面是我的 HTML 和 CSS。


HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>

<svg width="100" height="100">
<clipPath id="clipPolygon">
<polygon points="129 43,114 250,389 272,390 54,125 42">
</polygon>
</clipPath>
</svg>

</body>
</html>

CSS

/*Chrome,Safari*/
-webkit-clip-path: polygon(129px 43px,114px 250px,389px 272px,390px 54px,125px 42px);

/*Firefox*/
clip-path: url("#clipPolygon");

最佳答案

来自文档 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath ,

The clipping path restricts the region to which paint can be applied.

所以在你真正尝试画一些东西之前你不会真正看到它的效果,就像这样

<svg width="1000" height="1000">
<clipPath id="clipPolygon">
<polygon points="129 43,114 250,389 272,390 54,125 42">
</polygon>
</clipPath>
<rect x="0" y="0" height="1000" width="1000" fill="red" clip-path="url('#clipPolygon')"></rect>
</svg>

关于css - SVG 剪辑路径不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31645110/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com