我尝试将css-style应用于svg-elements。我想在没有任何脚本的情况下这样做。
虽然样式似乎 不适用于<defs>
:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="80">
<style>
rect:hover {
opacity: 0.5;
}
</style>
<defs>
<rect id="box" x="0" y="0" width="30" height="20" rx="3" ry="3" style="fill:green;stroke-width:1;stroke:rgb(0,0,0)"/>
<g id="month">
<!-- first row -->
<g transform="translate(50 40)">
<use xlink:href='#box'/>
<text x="5" y="15" fill="grey">Mon</text>
</g>
<g transform="translate(80 40)">
<use xlink:href='#box'/>
<text x="5" y="15" fill="grey">Thu</text>
</g>
</g>
</defs>
<use xlink:href='#month'/>
</svg>
这有效:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="80">
<style>
rect:hover {
opacity: 0.5;
}
</style>
<rect id="box" x="0" y="0" width="30" height="20" rx="3" ry="3" style="fill:green;stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
有没有办法申请css?是否可能有不同的方法将其应用于<defs>
- 元素?或者任何解决方法?
答案 0 :(得分:1)
编辑 - 这是对原始问题的回答,该问题现已更新并使回复无效。
当然,只需给use
一个班级或ID ..
.box {
fill: green;
stroke-width: 1;
stroke: rgb(0, 0, 0);
}
.box:hover {
fill: red;
}
&#13;
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="80">
<defs>
<rect id="box" x="0" y="0" width="30" height="20" rx="3" ry="3" />
</defs>
<use xlink:href='#box' class="box" />
</svg>
&#13;