Question

我有一个从adobe illustrator导出的svg文件，我试图用它来塑造我的图层，就像我们使用clip-path：polygon（）;但它无论如何都不起作用，这是我的代码

.he-b {
  position: absolute;
  margin: auto;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  -webkit-clip-path: url(svg/Asset1.svg);
  clip-path: url(svg/Asset1.svg);
  background-color: black;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.24 90.35">
	<defs>
		<style>
			.cls-1{
				fill:#231f20;
			}
		</style>
	</defs>
	<title>
		Asset 1
	</title>
	<g id="Layer_2" data-name="Layer 2">
		<g id="Layer_1-2" data-name="Layer 1">
			<path class="cls-1" d="M39.12,0,0,22.59V67.76L39.12,90.35,78.24,67.76V22.59ZM65.88,60.63,39.12,76.08,12.36,60.63V29.72L39.12,14.27,65.88,29.72Z"/>
		</g>
	</g>
</svg>

Answer 1

检查这个。

此类型属性适用于 Firefox 而不是 chrome。
"xxx.svg#id"
Svg clipPath 标记格式不在您的示例中。

#我觉得css属性还可以。

一些样品？
见下文
using an external svg with clip-path in Firefox
Clip-path for internal and external SVG > jsfiddle.net/stjtudvj/2

css clip-path：url（）;不使用svg文件源

1 个答案: