SVG CSS-Stil

Wir können die Styles für SVG-Formen mit CSS setzen. Styles sind Veränderungen am Aussehen der Formen. Dies kann die Farbe und Breite der Kontur, die Füllfarbe, Transparenz und viele andere Attribute der Formen sein.

Es gibt6Diese Stile können Formen in SVG-Bildern setzen. Jeder wird in diesem Artikel vorgestellt. Am Ende dieses Artikels finden Sie eine Liste der mit SVG verwendbaren CSS-Attribute.

Verwenden Sie CSS-Style-Attribute

Kann man spezifische Style-Attribute (z.B. stroke und fill) verwenden, um SVG-Formen zu stylen? Dies ist ein Beispiel:

<svg xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">
<circle　cx="40"　cy="40"　r="24"　stroke="#000000"　fill="#00ff00"　/>
</svg>

Obwohl es eine Reihe von verfügbaren Style-Attributen gibt. Es wird jedoch empfohlen, Inline-Stylesheets oder externe Stiltabellen zu verwenden, daher werde ich die Style-Attribute hier nicht ausführlich erläutern.

Verwenden Sie Style-Attribute und CSS-Attribute

Diese Methode verwendet keine spezifischen Style-Attribute. Stattdessen wird nur das style-Attribut verwendet und darin die CSS-Attribute angegeben. Wenn Sie direkt im Stil eingebettete Styles einfügen möchten, ist diese Methode besser als spezifische Attribute, da Sie die Namen der CSS-Attribute lernen können. CSS-Attribute in internen oder externen Stiltabellen sind gleich, daher ist das Kopieren und Einfügen sowie das Lernen solcher Inhalte einfacher.

Dies ist ein Beispiel für einen Kreis, der mit dem style-Attribut und CSS-Attributen umrandet und gefüllt wird:

<svg xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="40"　cy="40"　r="24"　style="stroke:　#000000;　fill:#00ff00;"　/></svg>

Verwenden Sie Inline-Stylesheets

Styles für Formen können in eingebetteten Stiltabellen definiert werden und werden dann automatisch auf die Formen angewendet. Dies ist ein Beispiel:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　
　　　　<style type="text/css" >
　　　　　　<![CDATA[
　　　　　　　　circle　{
　　　　　　　　　　　stroke:　#006600;
　　　　　　　　　　　fill: #00cc00;
　　　　　　　　}
　　　　　　]]>
　　　　</style>
　　　　
　　　　<circle　　cx="40"　cy="40"　r="24"/>
</svg>

Bemerken Sie, wie die Styles für das circle-Element im <style>-Element definiert werden. Dies funktioniert auf die gleiche Weise wie in HTML und CSS.

Interne Stileigenschaften in Internet Explorer 7und Firefox 3.0.5funktionieren normal.

Das Ergebnis ist wie folgt:

class-Klasseneigenschaft

Man kann Attribute im Shape verwenden, um den Stil des Shapes auszuwählen, anstatt den Stil auf alle Shapes desselben Typs anzuwenden (z.B. alle Kreise). Genau wie Class in HTML-Elementen verwendet wird.

Dies ist ein Beispiel für zwei Kreisstile-Grün und Rot.<circle> verwendet die folgenden class-Attribute, um jede dieser Stile auf den jeweiligen Element anzuwenden:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<style type="text/css" >
　　　　　　<![CDATA[
　　　　　　　　circle.myGreen {
　　　　　　　　　　　stroke:　#006600;
　　　　　　　　　　　fill: #00cc00;
　　　　　　　　}
　　　　　　　circle.myRed {
　　　　　　　stroke: #660000;
　　　　　　　fill: #cc0000;
　　　　}
　　　　　　]]>
　　　　</style>
　　　　<circle class="myGreen" cx="40"　cy="40" r="24"/>
　　　　<circle class="myRed" cx="40"　cy="100"　r="24"/>
</svg>

Bitte beachten Sie, dass der Name des Selectors in der Stileigenschaft mit .myGreen und dem Suffix .myRed endet. Jetzt kann der <circle>-Element mit class="myGreen" grüne oder mit class="myRed" rote Kreisstile definieren.

Externe Stileigenschaften verwenden

Bei der Verwendung externer Stileigenschaften wird die Stileigenschaft in einer separaten Datei gespeichert und auf dem Webserver abgelegt, genau wie die externen CSS-Dateien in HTML-Seiten. Außerdem müssen Sie vor dem <svg>-Element die folgenden Deklarationen in der SVG-Datei enthalten:

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?

Diese Anweisung teilt dem SVG-Betrachter mit, dass die CSS-Stileigenschaften zur Datei " svg" verwendet werden sollen.-stylesheet.css”。

Dies ist ein Beispiel für eine Deklaration in SVG-Dateien:

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?
<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle　cx="40"　cy="40"　r="24"
　　　　　　　style="stroke:#006600; fill:#00cc00"/>
</svg>

Hinweis: Externe CSS-Stileigenschaften in Internet Explorer 7funktioniert anscheinend normal, aber in Firefox 3.0.5dann nicht.

Stileigenschaften in HTML-Seiten verwenden.

Wenn SVG-Bilder in HTML-Seiten eingebettet werden, können auch die Stileigenschaften der SVG-Bilder in die HTML-Seite eingebettet werden. Dies ist ein Beispiel:

<html>
<body>
<style>
</style>
<svg>
</svg>
</body>
</html>

To add styles to shapes within an SVG image, simply add regular CSS properties within the style element. You can use the CSS selectors commonly used in HTML to set the styles of SVG elements. This is an HTML page where the circle element is styled by the CSS style sheet within the HTML page:

<html>
<body>
<style>
　　circle　{
　　　　　stroke:　#006600;
　　　　　fill　　:　#00cc00;
　　}
</style>
<svg>
　　<circle　cx="40"　cy="40"　r="24"　/>
</svg>
</body>
</html>

If the SVG image is directly embedded in the HTML page, this may be the simplest method to set the SVG shape style.

Locally overriding style sheets in shapes

If the style has already been set in the style sheet, this style can be overridden by locally setting a new style attribute within the shape to be styled. Styles locally set within the shape always take precedence over styles defined in internal or external style sheets.

SVG CSS properties

SVG elements have the following CSS properties that can be set. Not all elements have all these CSS properties. Therefore, CSS properties are divided into multiple tables for different elements.

Shape CSS properties

CSS properties of the path element and other shape elements:

Text-CSS-Attribute

CSS-Attribute des Textelements:

Verlauf-CSS-Attribute

SVG-Verlauf-CSS-Attribute: