SVG
utilizar
Buscar..
Parámetros
Parámetro | Detalles |
---|---|
X | coordenada del eje x de la esquina superior izquierda |
y | coordenada del eje y de la esquina superior izquierda |
anchura | ancho del elemento <use> |
altura | altura del elemento <use> |
xlink: href | identificador de recursos (se refiere al ID de otro elemento) SVG 2 propone desaprobar esto y reemplazarlo con un atributo href simple |
Observaciones
Los detalles se pueden encontrar en la Recomendación W3C para SVG , así como en la nueva Recomendación de candidato para SVG2
Usando un icono
El elemento <use>
se usa a menudo para iconos reutilizables, en colaboración con el elemento <symbol>
. Eso se parece a esto:
<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>
Y el elemento <use>
:
<svg>
<use xlink:href="#icon-star"/>
</svg>
El elemento <use>
copia el <symbol>
y lo muestra. También puede anular los estilos en <symbol>
en elementos <use>
individuales, por ejemplo,
<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
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow