css 剪辑路径: url ();不适用于 svg 文件源

Posted 2023-02-25

【中文标题】css 剪辑路径: url ();不适用于 svg 文件源

【英文标题】：css clip-path : url (); not working with svg file source

【发布时间】：2017-07-18 14:11:27

【问题描述】：

我有一个从 adobe illustrator 导出的 svg 文件，我尝试使用它来塑造我的图层，就像我们使用剪辑路径所做的那样：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>

【问题讨论】：

整个 svg 文件不能是剪辑路径。您需要指向文件中 clipPath 元素的 id。

我试过了，但它似乎不起作用

试过了吗？更新您的问题。

-webkit-clip-path: url(svg/Asset1.svg#Layer_2); clip-path: url(svg/Asset1.svg#Layer_2);

并尝试了这个-webkit-clip-path: url(svg/Asset1.svg#Layer_1-2); clip-path: url(svg/Asset1.svg#Layer_1-2);

【参考方案1】：

检查一下。

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

#我觉得css属性还可以。

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

【讨论】：

当您遇到已经被问到的问题时，请将其标记为重复，无需使用链接回答

@Vega 用户在获得 15 个代表之前无法标记帖子。