gpt4 book ai didi

css - 具有 2 种颜色的 SVG 条纹

转载 作者:行者123 更新时间:2023-11-28 15:35:54 26 4
gpt4 key购买 nike

在这个例子中: https://jsfiddle.net/ywb77uhv/

为什么将 strip 路径颜色更改为白色以外的颜色会破坏渲染?如何能够更改路径颜色?

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<style>

#stripe path {
stroke: #fff;
stroke-width: 2px;
}
.stripe {
mask: url("#mask");
}
.blue.stripe {
fill: #00f;
}
.red.stripe {
fill: #f00;
}
</style>
</head>
<body>
<svg height="500" width="500">
<defs>
<pattern id="stripe" patternUnits="userSpaceOnUse" width="4" height="4">
<path d="M-1,1 l2,-2
M0,4 l4,-4
M3,5 l2,-2" />
</pattern>
<mask id="mask">
<rect height="100%" width="100%" style="fill: url(#stripe)" />
</mask>
</defs>
<g>
<g class="stripe">
<rect width="100" height="50" y="0" />
</g>
<g class="red stripe">
<rect width="100" height="50" y="50" />
</g>
<g class="blue stripe">
<rect width="100" height="50" y="100" />
</g>
</g>
</svg>
</body>
</html>

最佳答案

因为在 SVG 中, mask 使用 mask 定义中颜色的亮度来计算 mask 的 alpha 值。白色 = 100% 不透明度。红色 = 70% 不透明度,蓝色 = 十几岁不透明度。

关于css - 具有 2 种颜色的 SVG 条纹,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44162171/

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