gpt4 book ai didi

html - 使用对文件中定义的引用的 SVG 填充图案

转载 作者:行者123 更新时间:2023-11-28 01:41:33 25 4
gpt4 key购买 nike

以下使用图案填充制作矩形的尝试在 Safari 6.1、Firefox 30 或 Chrome 36 中似乎不起作用,即使 W3 规范 seems to say 也是如此。我可以使用 non-local IRI reference ,包括相关的,例如 fill="url(localURL.svg#MyId)"

test.html

<html>
<head>
<style>
.patterned { fill: url("patterns.svg#polkadot");
stroke: lime; stroke-width: 5px}
</style>
</head>

<body>
<svg width="500" height="500">
<rect class="patterned" height="27" width="58">
</svg>
</body>
</html>

模式.svg

<svg xml:space="preserve" width="225" height="110" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="polkadot" patternunits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<circle r="10" cx=12 cy=10 fill="purple">
</pattern>
</defs>
</svg>

Safari 和 Chrome 显示一个黑色填充的绿色轮廓矩形。 Firefox 显示一个空的或白色填充的绿色轮廓矩形。它们都没有出现紫色圆圈的图案。


我正在尝试这种方法,因为在我正在使用 the most common method, an inline defs with fill="url(#MyId)" 的 Backbone+JQuery+D3 元素中,我无法在 Safari 上使用 SVG 填充模式。 .作为一个简单的测试用例,我无法让这种方法失败——I thought I had ,但事实证明这是一个不同的 Safari 错误,有一个明显的解决方法。至少这种方法在某些浏览器中有效。

最佳答案

您的 patterns.svg 文件中存在大量语法错误。缺少 "字符环绕属性值,一个未闭合的圆元素,patternunits 而不是 patternUnits。

独立的 SVG 必须是有效的 XML,它不像 html 那样宽容,而且它对属性名称也区分大小写。如果您直接加载 patterns.svg 文件,浏览器会告诉您所有这些事情。

所有这些都已修复(如下所示),这在 Firefox 中有效。我不确定 Chrome/Webkit 是否已经实现了这一点。

<svg xml:space="preserve" width="225" height="110" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="polkadot" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<circle r="10" cx="12" cy="10" fill="purple"/>
</pattern>
</defs>
</svg>

关于html - 使用对文件中定义的引用的 SVG 填充图案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25676712/

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