Question

我学习SVG。我想更改第二个fill的圈use值。我该怎么做？这是我的尝试：

* {
	stroke: brown;
	stroke-width: 1;
	fill: none;
}

.canvas{
	border-color: green;
	border-style: solid;
	border-width: 1px;
}

.sun > circle{
	fill: yellow;
}

.hot-sun > circle {
	fill: red;
}

<?xml version='1.0'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/DTD/svg11.dtd'>
<?xml-stylesheet type='text/css' href='../css/index.css'?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1400' height='1000' viewBox='0 0 1400 1000' class='canvas'>
	<title>SVG learning</title>
	<desc>This is my sandbox</desc>
	<defs> 
		<g id='foo' class='sun'>
			<rect x='0' y='0' width='50' height='50'/>
			<circle cx='25' cy='25' r='10'/>
		</g>
	</defs>
	<g id='dwg'>
		<use xlink:href='#foo' transform='translate(10 10)' />
    <!-- Here I expected my sun will be red...-->
		<use xlink:href='#foo' transform='translate(10 70)' class='hot-sun'/>
	</g>
</svg>

Answer 1

您不能CSS选择use元素的子元素，因为它们不是DOM的一部分。尽管如此，use元素本身的CSS属性可以继承。因此，只要不设置rake aborted! LoadError: cannot load such file -- redmine/wiki_formatting/textile/redcloth3中定义的引用元素的样式，<defs>的样式就会占上风。

请注意，一定不能有<use>规则。它会设置* { fill:...}元素的样式，并且优先于defs > #foo > circle元素的继承。这就是为什么第二个太阳的中风仍然是棕色的，尽管我已经定义了将它涂成绿色的规则。

＆＃13;

use

＆＃13;

* {
	stroke: brown;
	stroke-width: 1;
}

#foo rect {
	fill: none;
}

.canvas{
	border-color: green;
	border-style: solid;
	border-width: 1px;
}

use {
	fill: yellow;
}

.hot-sun {
	fill: red;
	stroke: green
}

＆＃13;

如何更改子项的属性由`use`元素使用？

1 个答案: