html - tamaño - svg icons css
Cómo estilo SVG con CSS externo? (11)
Tengo varios gráficos SVG que me gustaría modificar a través de mis hojas de estilo externas, no directamente dentro de cada archivo SVG. No coloco los gráficos en línea, sino que los guardo en mi carpeta de imágenes y los señalo.
Los he implementado de esta manera para permitir que la información sobre herramientas funcione, y también envolví cada uno en una etiqueta <a> para permitir un enlace.
<a href=''http://youtube.com/...'' target=''_blank''><img class=''socIcon'' src=''images/socYouTube.svg'' title=''View my videos on YouTube'' alt=''YouTube'' /></a>
Y aquí está el código del gráfico SVG:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
<path d="M28.44......./>
</g>
</svg>
Puse lo siguiente en mi archivo CSS externo (main.css):
.socIcon g {fill:red;}
Sin embargo, no tiene ningún efecto en el gráfico. También probé .socIcon g path {} y .socIcon path {}.
Algo no está bien, tal vez mi implementación no permite modificaciones externas de CSS, o me perdí un paso? ¡Realmente apreciaría tu ayuda! Solo necesito la capacidad de modificar los colores del gráfico SVG a través de mi hoja de estilo externa, pero no puedo perder la información sobre herramientas y la capacidad de enlace. (Sin embargo, puedo vivir sin información sobre herramientas.) ¡Gracias!
"De hecho, voy a cambiar los colores de estas imágenes según el esquema de color que el usuario haya elegido para mi sitio". - Jordan 10 horas
Te sugiero que uses PHP para esto. Realmente no hay mejor manera de hacerlo sin las fuentes de iconos, y si te resistes a usarlas, podrías probar esto:
<?php
header(''Content-Type: image/svg+xml'');
echo ''<?xml version="1.0" encoding="utf-8"?>'';
$color = $_GET[''color''];
?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
<path fill="<?php echo $color; ?>" d="M28.44..."/>
</g>
</svg>
Y luego puedes usar este archivo como filename.php?color=#ffffff para obtener el archivo svg en el color deseado.
Cuando se utiliza en una etiqueta <image> SVG debe estar contenida en un solo archivo por razones de privacidad. Este error bugzilla tiene más detalles sobre por qué esto es así. Lamentablemente, no puede usar una etiqueta diferente, como un <iframe> porque eso no funcionará como un enlace, por lo que tendrá que insertar el CSS en una etiqueta <style> dentro del archivo.
Otra forma de hacerlo sería tener los datos SVG dentro del archivo html principal, es decir,
<a href=''http://youtube.com/...'' target=''_blank''>
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
<path d="M28.44......./>
</g>
</svg>
</a>
Puede darle estilo con un archivo CSS externo usando la etiqueta HTML <link> .
Debería ser posible hacer primero alineando las imágenes svg externas. Mire aquí por ejemplo:
Reemplazar todas las imágenes Svg con Inline Svg | JAVASCRIPT | Code Snippet Library por Jess Frazelle
Es posible diseñar un SVG creando dinámicamente un elemento de estilo en JavaScript y añadiéndolo al elemento SVG. Hacky, pero funciona.
<object id="dynamic-svg" type="image/svg+xml" data="your-svg.svg">
Your browser does not support SVG
</object>
<script>
var svgHolder = document.querySelector(''object#dynamic-svg'');
svgHolder.onload = function () {
var svgDocument = svgHolder.contentDocument;
var style = svgDocument.createElementNS("http://www.w3.org/2000/svg", "style");
// Now (ab)use the @import directive to load make the browser load our css
style.textContent = ''@import url("/css/your-dynamic-css.css");'';
var svgElem = svgDocument.querySelector(''svg'');
svgElem.insertBefore(style, svgElem.firstChild);
};
</script>
Podrías generar el JavaScript dinámicamente en PHP si así lo deseas; el hecho de que esto sea posible en JavaScript abre una miríada de posibilidades.
Lo que funciona para mí: etiqueta de estilo con @import rule
<defs>
<style type="text/css">
@import url("svg-common.css");
</style>
</defs>
Puede hacer lo que quiera, con una advertencia (importante): las rutas dentro de su símbolo no se pueden diseñar de forma independiente a través de CSS externo; solo puede establecer las propiedades para el símbolo completo con este método. Por lo tanto, si tiene dos rutas en su símbolo y desea que tengan diferentes colores de relleno, esto no funcionará, pero si desea que todas las rutas sean las mismas, esto debería funcionar.
En tu archivo html, quieres algo como esto:
<style>
.fill-red { fill: red; }
.fill-blue { fill: blue; }
</style>
<a href="//www.example.com/">
<svg class="fill-red">
<use xlink:href="images/icons.svg#example"></use>
</svg>
</a>
Y en el archivo externo SVG quieres algo como esto:
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="example" viewBox="0 0 256 256">
<path d="M120.... />
</symbol>
</svg>
Cambia la clase en la etiqueta svg (en tu html) de fill-red a fill-blue y ta-da ... tienes azul en lugar de rojo.
Puede evitar parcialmente la limitación de poder segmentar las rutas por separado con CSS externo mezclando y combinando el CSS externo con algunos CSS en línea en rutas específicas, ya que el CSS en línea tendrá prioridad. Este enfoque funcionaría si está haciendo algo así como un icono blanco sobre un fondo de color, donde quiere cambiar el color del fondo a través del CSS externo, pero el icono en sí mismo es siempre blanco (o viceversa). Entonces, con el mismo código HTML que antes y algo así como este código svg, obtendrás un fondo rojo y una ruta de primer plano blanca:
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="example" viewBox="0 0 256 256">
<path class="background" d="M120..." />
<path class="icon" style="fill: white;" d="M20..." />
</symbol>
</svg>
Sé que es una publicación anterior, pero solo para aclarar este problema ... simplemente usa sus clases en el lugar equivocado: D
Primero que nada podrías usar
svg { fill: red; }
en tu main.css para ponerlo rojo. Esto tiene efecto. También puedes usar selectores de nodos para obtener pathes específicos.
En segundo lugar, declaraste la clase al img -Tag.
<img class=''socIcon''....
Deberías declararlo dentro de tu SVG. si tienes diferentes pathes podrías definir más, por supuesto.
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
<path class="myClassForMyPath" d="M28.44......./>
</g>
</svg>
ahora puedes cambiar el color en tu main.css como
.myClassForMyPath {
fill: yellow;
}
Su archivo main.css solo tendrá un efecto sobre el contenido de SVG si el archivo SVG está incluido en línea en el HTML:
https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction
<html>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
<path d="M28.44......./>
</g>
</svg>
</html>
Si desea mantener su SVG en archivos, el CSS debe definirse dentro del archivo SVG.
Puedes hacerlo con una etiqueta de estilo:
http://www.w3.org/TR/SVG/styling.html#StyleElementExample
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="50px" height="50px" viewBox="0 0 50 50">
<defs>
<style type="text/css"><![CDATA[
.socIcon g {
fill:red;
}
]]></style>
</defs>
<g>
<path d="M28.44......./>
</g>
</svg>
Puede usar una herramienta del lado del servidor para actualizar la etiqueta de estilo dependiendo del estilo activo. En ruby puedes lograr esto con Nokogiri. SVG es solo XML. Entonces, probablemente haya muchas bibliotecas XML disponibles que probablemente puedan lograr esto.
Si no puede hacer eso, tendrá que usarlos como si fueran PNG; creando un conjunto para cada estilo y guardando sus estilos en línea.
Un enfoque que puede tomar es simplemente usar filtros CSS para cambiar la apariencia de los gráficos SVG en el navegador.
Por ejemplo, si tiene un gráfico SVG que utiliza un color rojo de relleno dentro del código SVG, puede ponerlo de color púrpura con un ajuste de rotación de tono de 180 grados:
#theIdOfTheImgTagWithTheSVGInIt {
filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);
-moz-filter: hue-rotate(180deg);
-o-filter: hue-rotate(180deg);
-ms-filter: hue-rotate(180deg);
}
Experimente con otros ajustes de rotación de tono para encontrar los colores que desee.
Para ser claros, el CSS anterior va en el CSS que se aplica a su documento HTML. Está diseñando la etiqueta img en el código HTML, sin diseñar el código del SVG.
Y tenga en cuenta que esto no funcionará con gráficos que tienen un relleno de negro o blanco o gris. Debes tener un color real para rotar el tono de ese color.
Una solución muy rápida para tener un estilo dinámico con una hoja de estilo css externa, en caso de que esté utilizando la etiqueta <object> para incrustar su svg.
Este ejemplo agregará una clase a la etiqueta raíz <svg> al hacer clic en un elemento principal.
file.svg:
<?xml-stylesheet type="text/css" href="../svg.css"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="">
<g>
<path/>
</g>
</svg>
html:
<a class="parent">
<object data="file.svg"></object>
</a>
Jquery:
$(function() {
$(document).on(''click'', ''.parent'', function(){
$(this).find(''object'').contents().find(''svg'').attr("class","selected");
}
});
al hacer clic en el elemento padre:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="" class="selected">
entonces puedes administrar tu css
svg.css:
path {
fill:none;
stroke:#000;
stroke-miterlimit:1.41;
stroke-width:0.7px;
}
.selected path {
fill:none;
stroke:rgb(64, 136, 209);
stroke-miterlimit:1.41;
stroke-width:0.7px;
}
Este método funcionará si el svg se visualiza dentro de un navegador web, pero tan pronto como este código se cargue al servidor y la clase del icono svg se codifique como si fuera una imagen de fondo, el color se perderá y volverá al color predeterminado. . Parece que el color no se puede cambiar desde la hoja de estilos externa, aunque tanto la clase svg para el color como la clase de capa superior para la visualización y la posición de la svg están asignadas al mismo directorio.