Question

这是我的代码：

<?xml version="1.0" standalone="no"?>
<html>
    <head>
        <style>
             .someClass {
                fill:"url(#Pattern)";
            }
        </style>
    </head>
    <body>
        <div>
            <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
                <defs>
                    <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
                        <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
                        <circle cx="25" cy="25" r="20" fill-opacity="0.5"/>
                    </pattern>
                </defs>
                <rect id="rect" fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/>
            </svg>
        </div>
    </body>
</html>

在rect中我直接添加了填充属性。它工作，但如果我设置类（.someClass）而不是fill属性代码不能正常工作。

如何解决这个问题？

我需要设置类而不是填充rect。

Answer 1

检查它是否正常工作。在css中不需要""（双引号）。

.someClass {
    fill:skyblue;
}

.otherClass {
    fill:url(#Pattern);
}

<div>
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
                <rect x="0" y="0" width="50" height="50" class="someClass"/>
                <circle cx="25" cy="25" r="20" fill-opacity="0.5"/>
            </pattern>
        </defs>
        <rect id="rect" class="otherClass"  stroke="black" x="0" y="0" width="200" height="200"/>
    </svg>
</div>

Fiddle link

如何在fill属性中使用url

1 个答案: