1. Zuhause
  2. Frage und Antwort
  3. Wechsel zu SVG-Symbolen - wie trennt man sie vom Code?

Wechsel zu SVG-Symbolen - wie trennt man sie vom Code?

2015-01-14 8 views
5

SVG-Icons haben einige Vorteile gegenüber den Font-Icons: Sie können skaliert werden, um ein Containerelement variabler Größe anzupassen, und Sie können theoretisch die Farbe einzelner Pfade ändern. Ich mag auch die Tatsache, dass ich sie leicht in Inkscape machen kann: PWechsel zu SVG-Symbolen - wie trennt man sie vom Code?

Aber wie verschiebe ich das SVG in der CSS-Datei, so dass sie auf der gleichen Seite wie Symbolschriften wiederverwendet werden können, und trotzdem von diesen Vorteilen profitieren ?

Die Hintergrund-Eigenschaft unterstützt SVG, mit background: url(#svg_element), aber das bedeutet, ich muss die SVG in den HTML: | Wenn ich es als eine "Daten" Zeichenfolge, wie ändere ich Pfadfarben in der gleichen CSS-Datei?

Quelle

2015-01-14 Alex

+0

Sie können auch in eine Datei mit anme wie svg_element.svg und verwenden Sie es wie diese style = "Hintergrund: url (svg_element.svg)" – ambes

+0

Das ist fast das gleiche mit der Daten-URL-Zeichenfolge, aber mit einer zusätzlichen Anfrage für jedes Symbol: P – Alex

+0

Können Sie bitte erklären, was ist "Wie ändere ich Pfadfarben in der gleichen CSS-Datei"? –

Antwort

1

Ich habe mit SVG vor, aber nicht mit SVG-Icons speziell gearbeitet. Basierend auf dem Wissen, das ich habe und ein wenig herumschauen, habe ich folgendes herausgefunden: (Ich habe deine Frage vielleicht nicht vollständig verstanden, in diesem Fall bitte posten Sie weitere Fragen).

Aber wie verschiebe ich die SVG in der CSS-Datei, so dass sie auf der gleichen Seite

wiederverwendet werden, aber das bedeutet, dass ich die SVG in HTML

SVG setzen ist im Grunde XML, also nicht genau, warum Sie nicht SVG in HTML-Datei einfügen möchten. Wenn Sie SVG in eine HTML-Datei einfügen, können Sie einfach externes oder internes CSS verwenden, um SVG zu formatieren. Hier ist eine sample, nur um das zu tun.

In HTML-Datei:

<circle cx="100" cy="100" r="75" />

In einer CSS-Datei: (CSS-Datei in Ihnen HTML-Datei einschließen)

<style> 
circle { 
    fill: deepPink; 
    transition: fill .3s ease-out; 
} 

circle:hover { 
    fill: #009966; 
} 
</style>

Hier ist die zweite Möglichkeit, viele andere, <img/> Tag verwenden. Hier ist eine article, die erläutert, wie SVG aus einer separaten Datei mit <img/> Tag zu verwenden. Und hier ist die code begleitend. Beachten Sie auch, dass das jQuery-Plugin svginject verwendet wird.

Hier sind einige andere options, SVG aus HTML und ihre Vorzüge zu halten.

Hoffe, das hilft.

Quelle

2015-01-17 02:09:24 functionoid

3

Wenn Sie SVG als Hintergrundbild verwenden, können Sie die Pfad- und Füllfarben (AFAIK) nicht ändern. Sie können jedoch weiße SVG- und Hintergrundfarben verwenden, um Symbole im Metro-Stil zu erstellen. Genau das tut jQuery Mobile theming system.

.icon { 
 
    display: inline-block; 
 
    width: 80px; 
 
    height: 80px; 
 
    background-size: 80%; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
} 
 
.icon-1 { 
 
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%2214%2C5%209%2C5%207%2C0%205%2C5%200%2C5%204%2C8%202.625%2C13%207%2C10%2011.375%2C13%2010%2C8%20%22%2F%3E%3C%2Fsvg%3E"); 
 
} 
 
.icon-bg-1 { 
 
    background-color: #800080; 
 
} 
 
.icon-bg-2 { 
 
    background-color: #DB7093; 
 
} 
 
.icon-bg-3 { 
 
    background-color: #CD853F; 
 
} 
 
.icon-bg-4 { 
 
    background-color: #B0E0E6; 
 
}
<span class="icon icon-1 icon-bg-1"></span> 
 
<span class="icon icon-1 icon-bg-2"></span> 
 
<span class="icon icon-1 icon-bg-3"></span> 
 
<span class="icon icon-1 icon-bg-4"></span>

Eine weitere Option ist eine farbige SVG verwenden und CSS3 hue-rotate filter die Farbe von SVG zu ändern. Diese Eigenschaft wird noch nicht umfassend unterstützt.

Hinweis: Die Farbtonrotation wirkt sich nur auf "Farben" aus; Schwarz, Weiß und Grau bleiben unberührt.

.icon { 
 
    display: inline-block; 
 
    width: 80px; 
 
    height: 80px; 
 
    background-size: 80%; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-color: #EEEEEE; 
 
} 
 
.icon-1 { 
 
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FF0000%3B%22%20points%3D%2214%2C5%209%2C5%207%2C0%205%2C5%200%2C5%204%2C8%202.625%2C13%207%2C10%2011.375%2C13%2010%2C8%20%22%2F%3E%3C%2Fsvg%3E"); 
 
} 
 
.icon-hue-1 { 
 
    -webkit-filter: hue-rotate(0deg); 
 
    -moz-filter: hue-rotate(0deg); 
 
      filter: hue-rotate(0deg); 
 
} 
 
.icon-hue-2 { 
 
    -webkit-filter: hue-rotate(90deg); 
 
    -moz-filter: hue-rotate(90deg); 
 
    filter: hue-rotate(90deg); 
 
} 
 
.icon-hue-3 { 
 
    -webkit-filter: hue-rotate(180deg); 
 
    -moz-filter: hue-rotate(180deg); 
 
      filter: hue-rotate(180deg); 
 
} 
 
.icon-hue-4 { 
 
    -webkit-filter: hue-rotate(270deg); 
 
    -moz-filter: hue-rotate(270deg); 
 
      filter: hue-rotate(270deg); 
 
}
<span class="icon icon-1 icon-hue-1"></span> 
 
<span class="icon icon-1 icon-hue-2"></span> 
 
<span class="icon icon-1 icon-hue-3"></span> 
 
<span class="icon icon-1 icon-hue-4"></span>

Quelle

2015-01-19 09:34:30

11

Aber wie verschiebe ich die SVG in der CSS-Datei, so dass sie auf der gleichen Seite wieder verwendet werden, wie Symbol Schriftarten und immer noch von diesen Vorteilen profitieren?

Mit svg Vorlagen

Ermöglicht eine svg Vorlage erstellen.

Vorlage (html)

<svg width="100px" height="100px" viewBox="0 0 100 100" class="hide"> 
    <circle id="circle-tmp" cx="50" cy="50" r="50" /> 
</svg>

Es ist eine Schablone, also verstecken wir es. (Aber immer noch in dem DOM)

.hide { display: none;} //css

Verwenden (html)

<svg viewBox="0 0 100 100 class="circle-first"> 
    <use xlink:href="#circle-tmp" /> 
</svg>

Diese auf der Seite überall wiederverwendet werden kann.

Wie ändere ich Pfadfarben in der gleichen CSS-Datei?

Einfach, einfach stylen!

css

.circle-first { 
    fill: #12bb34; 
}

Arbeiten Beispiel? Hier gehts: Fiddle

Browserunterstützung? Nicht 100% sicher, aber SVG-Unterstützung in allen großen Browsern: CanIUseIt

Quelle

2015-01-19 16:48:11 Persijn

+1

ok so im Grunde alle Antworten darauf hinweisen, dass es nicht möglich ist, Svg für das Styling zu verwenden, zumindest noch nicht. Ich wusste von der Verwendung der Sache, aber das hilft immer noch nicht beim Verschieben der Symbole, wo sie hingehören - in der CSS-Datei :( – Alex

1

Es scheint, Sie halten wollen weg xml Inhalt svg Datei aus html Codes.

dieser gerecht zu werden, sind zwei Szenarien svg Dateien in das html einzubetten zur Verfügung:

  1. Mit <object data="~/img/file.svg" type="image/svg+xml"></object> Element wird also xml von html==> die resultierende Ansicht getrennt werden würde Kombination von html und xml, die mit css (vielleicht eine scoped eine gestylt werden kann, die unter Verwendung <style scoped="scoped"></style> auf der Zielseite).
  2. <img src="~/img/file.svg"/> Element verwendet, so wird xml von html==> die resultierende Ansicht nur html und css kann nicht auf xml Inhalt svg Datei auszuführen wäre getrennt werden.

Ein anderer Weg svg zu verwenden ist Inline-Technik zu verwenden, sagen wir, mit <svg> Tag, so dass Sie Inline-Stylesheets auch dafür verwenden können, Aber Sie wollen trennen xml von html hier :)

Weitere Informationen: Using SVG und SVG Styling with CSS.

Quelle

2015-01-20 11:29:28

3

Um die Feinheiten von SVG-Icons zu erhalten, gibt es im Moment keine Alternative zur <svg> in Ihrer HTML-Seite.

Chris Coyier's article beschreibt die allgemein anerkannte Best Practice für die Aufnahme. Es ist so etwas wie:

  1. Speichern Sie Ihre SVG Symbol Definitionen als <symbols>:

    <svg id='my-icons'> 
    <symbol id='icon-puppy'> <!-- puppy icon goes here --> </symbol> 
    <symbol id='icon-kitty'> <!-- kitty icon goes here --> </symbol> 
</svg>

  2. Wenn Sie ein Symbol verwenden müssen, das Symbol Definition Referenz:

    <svg class='icon'> 
    <use xlink:href='#icon-puppy'/> 
</svg>

This article beschreibt, wie Sie die SVG-Datei in das HTML-Dynamicl einbeziehen könnten y.

Quelle

2015-01-20 12:47:23 Dan

1

Sie könnten auch etwas in das Projekt evil-icons graben. Sie werden einige nette Wege finden, Svg zu benutzen.

Ihre beste Idee ist es, alle Ihre Icons in einer einzigen Datei "sprite.svg" zusammenzuführen. Jedes deiner Svg-Icons muss von einem <symbol> Tag mit einer ID umschlossen sein. Dann greifen Sie jederzeit über einen xlink auf sie zu, wie in anderen Antworten erwähnt.

Durch das Laden der gesamten sprite.svg gewinnen Sie Ladezeit und Ordentlichkeit.

Quelle

2015-01-22 06:58:23 SenhorLucas

 Verwandte Themen

  • Keine verwandten Themen^_^