Wie wird das Attribut subitem vom `use` Element verwendet?

Ich lerne SVG. Ich möchte den Kreis fill Wert der zweiten use ändern. Wie kann ich es tun? Dies ist mein Versuch:Wie wird das Attribut subitem vom `use` Element verwendet?

* { 
 
\t stroke: brown; 
 
\t stroke-width: 1; 
 
\t fill: none; 
 
} 
 

 
.canvas{ 
 
\t border-color: green; 
 
\t border-style: solid; 
 
\t border-width: 1px; 
 
} 
 

 
.sun > circle{ 
 
\t fill: yellow; 
 
} 
 

 
.hot-sun > circle { 
 
\t 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'> 
 
\t <title>SVG learning</title> 
 
\t <desc>This is my sandbox</desc> 
 
\t <defs> 
 
\t \t <g id='foo' class='sun'> 
 
\t \t \t <rect x='0' y='0' width='50' height='50'/> 
 
\t \t \t <circle cx='25' cy='25' r='10'/> 
 
\t \t </g> 
 
\t </defs> 
 
\t <g id='dwg'> 
 
\t \t <use xlink:href='#foo' transform='translate(10 10)' /> 
 
    <!-- Here I expected my sun will be red...--> 
 
\t \t <use xlink:href='#foo' transform='translate(10 70)' class='hot-sun'/> 
 
\t </g> 
 
</svg>

Quelle

2017-08-21 Andrey Bushman

Sie nicht dafür verwendet werden soll. Zeichnen Sie einfach die gewünschten Formen in den gewünschten Farben. –

Ich möchte die 'foo' Gruppe viele Male mit verschiedenen' fill' Werten (zB von Radiuswerten) verwenden. Später, wenn es notwendig sein wird, ändere ich die 'foo' Definition an einer Stelle und sie würde für jede 'Verwendung' aktualisiert werden. Es ist wie bei AutoCAD-Blockdefinitionen. –

Verwendung ist nicht wirklich so konzipiert, so zu arbeiten. Es wurde entwickelt, um einen Gegenstand oft zu zeigen. –

Sie können nicht CSS-select Teilelemente eines Anwendungselement, da sie nicht Teil des DOM sind. Dennoch können CSS-Attribute für das Use-Element selbst vererbt werden. Solange Sie das referenzierte Element, das in <defs> definiert ist, nicht stylen, wird das Styling von <use> vorherrschen.

Beachten Sie, dass es keine * { fill:...} Regel geben darf. Es würde das Element defs > #foo > circle stylen, und das hätte Vorrang vor der Vererbung aus dem Element use. Deshalb bleibt der Strich der zweiten Sonne braun, trotz der Regel, die ich definiert habe, um sie grün zu malen.

* { 
 
\t stroke: brown; 
 
\t stroke-width: 1; 
 
} 
 

 
#foo rect { 
 
\t fill: none; 
 
} 
 

 
.canvas{ 
 
\t border-color: green; 
 
\t border-style: solid; 
 
\t border-width: 1px; 
 
} 
 

 
use { 
 
\t fill: yellow; 
 
} 
 

 
.hot-sun { 
 
\t fill: red; 
 
\t stroke: green 
 
}

<?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'> 
 
\t <title>SVG learning</title> 
 
\t <desc>This is my sandbox</desc> 
 
\t <defs> 
 
\t \t <g id='foo' class='sun'> 
 
\t \t \t <rect x='0' y='0' width='50' height='50'/> 
 
\t \t \t <circle cx='25' cy='25' r='10'/> 
 
\t \t </g> 
 
\t </defs> 
 
\t <g id='dwg'> 
 
\t \t <use xlink:href='#foo' transform='translate(10 10)' /> 
 
    <!-- Here I expected my sun will be red...--> 
 
\t \t <use xlink:href='#foo' transform='translate(10 70)' class='hot-sun'/> 
 
\t </g> 
 
</svg>

Quelle

2017-08-22 13:06:35 ccprog

Wie wird das Attribut subitem vom `use` Element verwendet?

Antwort

Verwandte Themen