granims - Modificar un archivo svg usando jQuery
popper js example (4)
¡Hecho!
Finalmente encontré documentación en jQuery.svg. y en svg en sí.
Empecemos con el código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="../js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.svg/jquery.svg.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function()
{
$("#svgload").svg({
onLoad: function()
{
var svg = $("#svgload").svg(''get'');
svg.load(''Red1.svg'', {addTo: true, changeSize: false});
},
settings: {}}
);
$(''#btnTest'').click(function(e)
{
var rect = $(''#idRect1'');
rect.css(''fill'',''green'');
//rect.attrib(''fill'',''green'');
var txt = $(''#idText1'');
txt.text(''FF'');
});
});
</Script>
<div id="svgload" style="width: 100%; height: 300px;"></div>
<div id="btnTest">
Click Me!
</div>
</body>
</html>
Y este archivo de muestra Red1.svg:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="idRect1" fill="#FF0000" width="300" height="300"/>
<text id="idText1" x="20" y="20" font-family="sans-serif" font-size="20px" fill="black">Hello!</text>
</svg>
Usando jQuery, cargué el Red1.svg externo en tiempo de ejecución. Con un clic en btnTest establezco el texto y el color de relleno.
En mi investigación he encontrado que:
- Con jQuery.svg puedo acceder a los elementos en el archivo SVG y la etiqueta html estándar
SVG le permite elegir la forma en que desea establecer el color de relleno
2a. con un estilo
rect.css(''fill'',''green'');2b. con una etiqueta específica
rect.attr(''fill'',''green'');
Entonces su código debe cambiar dependiendo del programa que generó el svg.
Que tengas un buen día.
Tengo un archivo svg con alguna forma y algo de texto. Me gustaría modificar el svg en tiempo de ejecución, para que algunas formas puedan cambiar de color y algunos textos puedan cambiar su contenido.
Supongamos que solo tengo dos elementos en un archivo svg externo:
círculo1: un círculo azul lleno con esa identificación
texto1: un texto que contiene "-" con esa identificación
Ahora puedo ver el archivo en mi html con
<object data="Sample.svg" type="image/svg+xml" width="200" height="200" id="svg1"></object>
Desde un botón cerca de la imagen, usando jQuery, puedo detectar el evento onClick: me gustaría llenar el ciclo con rojo y cambiar el texto a "hola palabra".
¿Cómo puedo hacer eso? ¿Hay una solución basada en jQuery?
He encontrado el complemento jquery.svg, pero parece que solo se puede modificar un documento creado en tiempo de ejecución.
Gracias.
Bueno, hay una biblioteca FANTÁSTICA que puedes usar con jQuery o cualquier otro javascript:
Raphael JS: http://raphaeljs.com/
Echa un vistazo a las muestras, puedes hacer casi cualquier cosa.
Uso svgweb para mostrar y manipular SVG mediante programación utilizando JavaScript. Lo uso porque transfiere SVG a IE6 + utilizando Flash, y porque proporciona algunas funciones de carga de SVG ordenadas.
Como me gusta mucho usar jQuery, lo parché para que funcione con svgweb. Utilicé el guión de Keith Woods como ejemplo. El código de Keith no admite la última versión de jQuery.
Aquí está el parche: jquery.svgweb-and-svgdom-patch . He querido darle un hogar adecuado en el svgweb contrib, pero no lo he logrado. Está basado en el parche de Keith, pero tiene algunas actualizaciones. Una cosa que debe saber, es que para IE, deberá colocar el siguiente código en un script antes de que se cargue jQuery:
document.querySelectorAll = null;
No es suficiente hacer esto después de que se cargue jQuery, por lo que tendría que usar la detección del navegador del lado del servidor para inyectarlo, o la detección del navegador del lado del cliente en una secuencia de comandos antes de jQuery.
Después de todo eso ... puedes hacer cosas como:
$(''#mycirc'').attr(''fill'', ''Red'');
http://irunmywebsite.com/raphael/additionalhelp.php?q=path Lo anterior es solo un ejemplo interactivo en mi sitio. Yo solo diría que encontré a los perros de Raphael precisos pero son mínimos, creo que el autor lo alienta a explorar por sí mismo
Estoy ipodding así que disculpa el inglés roto !!