SVG
använda sig av

Android Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP Python Language
Sök…


parametrar

Parameter detaljer
x x-axel koordinat i det övre vänstra hörnet
y y-axelkoordinaten i det övre vänstra hörnet
bredd <use> -elementets bredd
höjd höjden på elementet <use>
XLink: href resursidentifierare (hänvisar till ID för ett annat element) SVG 2 föreslår att avskriva detta och ersätta det med ett enkelt href-attribut

Anmärkningar

Detaljer finns i W3C-rekommendationen för SVG samt i den nya kandidatrekommendationen för SVG2

Använda en ikon

Elementet <use> används ofta för återanvändbara ikoner i samarbete med elementet <symbol> . Det ser ut så här: 

<svg>
    <symbol viewBox="0 0 16 16" id="icon-star">
        <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
    </symbol>
</svg>

Och <use> -elementet: 

<svg>
    <use xlink:href="#icon-star"/>
</svg>

Elementet <use> kopierar <symbol> och visar det. Du kan också åsidosätta stilarna på <symbol> på enskilda <use> -element, t.ex. 

<style>
    .red {
        fill: red;
    }
</style>

<svg>
    <use class="red" xlink:href="#icon-star"/>
</svg>


Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow