Question

是否可以在svg中使用渐变而不为其指定id？我需要能够使用javacsript动态创建可能的许多渐变，所以我宁愿没有计数器上去命名它们。对我来说似乎很草率。我想出了这个，但它没有渲染，任何想法，如果这是可能的或我做错了什么？

<html>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg">

            <rect width = "100" height = "100" fill = 'url(data:image/svg+xml;

            <linearGradient x1="0%" y1="50%" x2="100%" y2="50%">
                <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1;"></stop>
                <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1;"></stop>
            </linearGradient>

            )'></rect>
        </svg>
    </body>
</html>

Answer 1

如果您正确格式化所有内容，实际上可以使其正常工作。 SVG必须是有效的并且URL编码，并且您还需要使用id引用（以哈希的形式）。

以下文件适用于FF和较旧的（Blink前）Opera。

<svg xmlns="http://www.w3.org/2000/svg">

    <rect width = "100" height = "100" fill = "url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3ClinearGradient%20x1=%220%25%22%20y1=%2250%25%22%20x2=%22100%25%22%20y2=%2250%25%22%20id=%22foo%22%3E%3Cstop%20offset=%220%25%22%20style=%22stop-color:rgb(255,255,255);stop-opacity:1;%22%3E%3C/stop%3E%3Cstop%20offset=%22100%25%22%20style=%22stop-color:rgb(0,0,0);stop-opacity:1;%22%3E%3C/stop%3E%3C/linearGradient%3E%3C/svg%3E#foo')"></rect>

</svg>

Demo here

（感谢SVG WG的Tab和Boris帮助实现这项工作）

通过数据URI链接的SVG渐变

1 个答案: