Fügen Sie Svg zur Webseite hinzu?

Wie kann ich eine Svg zu meiner Webseite hinzufügen und ihre Farbe über CSS ändern?Fügen Sie Svg zur Webseite hinzu?

Ich habe versucht:

<img src="my.svg" class="svg"/> 

.svg{ 
    fill: white; 
}

Aber kein Glück.

CSS nur Lösungen bitte, und ich brauche keine Fallbacks, nur neue Browser unterstützt.

Quelle

2015-07-11 panthro

Es gibt viele Möglichkeiten, eine SVG zu integrieren, schauen Sie hier: https://css-tricks.com/using-svg. Es ist wichtig zu sagen, dass einige Wege einfacher aussehen (wie ein "" -Tag, wie Sie es getan haben oder als Hintergrundbild verwenden), aber es verursacht nur das Problem: Unmöglichkeit, externes CSS innerhalb des SVG zu kaskadieren , dh das Styling der Seite wird nicht im geladenen SVG angezeigt. –

Es wird nicht so funktionieren. Sie können die Füllfarbe ändern, wenn Sie die svg direkt sind, einschließlich, das heißt:

HTML:

<p>Some other webpage content</p> 
<svg class="my-svg"> 
    <g> 
     <path fill="..."></path> 
     <path fill="..."></path> 
    </g> 
</svg> 
<p>Some other webpage content</p>

CSS:

.my-svg *{ 
    fill:white; 
}

Also, Sie Web-inspizieren my.svg und Kopier- Fügen Sie den Inhalt auf der Zielseite ein. Dann können Sie es stylen.

Quelle

2015-07-11 13:39:13 nicael

Fügen Sie Svg zur Webseite hinzu?

Antwort

Verwandte Themen