¿Cómo puedo lograr cambiar el estilo de un «uso del elemento», que se define en defs, a través de secuencias de comandos? Yo estaba tratando de avanzar en el borrador de trabajo de w3c interfaces, pero he perdido en ese laberinto

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="100"
   height="100"
   id="svg1">

<defs>
   <g id="minchia" onclick="color(evt)">
     <rect width="50" height="50" style="fill:#ffff6e;stroke:#ee1400;stroke-width:3" />
   </g>
</defs>       

<script type="text/javascript"> 
<![CDATA[ 
function color(evt)
{   
    node = evt.target.correspondingUseElement;

    alert(node.getAttributeNS(null, "style"));   /* empty! */
    alert(node.getAttributeNS("http://www.w3.org/1999/xlink", "style"));   /* empty! */

    node.setAttributeNS("http://www.w3.org/1999/xlink", "fill", "blue");    /* nothing */
    node.setAttributeNS(null, "fill", "blue");  /* nothing */
}
]]> 
</script>

<use xlink:href="#minchia" id="frufru" x="10" y="10"  />       
</svg>

Actualización

Una cosa más: ¿y si la referencia es un elemento «g», que contiene 2 otros elementos, como un rectángulo y de un texto? ¿Cómo puedo configurar el atributo por el derecho childNode (a través de métodos de DOM fuera de curso)?
En este ejemplo, el setAttribute es el estilo del primer hijo del elemento de referencia. Lo que si tuve el estilo de la segunda?

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  width="1000"
  height="1000"
  id="svg1">

<defs>
  <g id="test" onclick="color(evt)" >
 <rect
   width="54"
   height="58"
   x="1.5"
   y="1.5"
   id="rect5" />
<text
   x="-34"
   y="47"
   transform="matrix(0.66777386,-0.74436421,0.74436421,0.66777386,0,0)"
   id="text2987"
   style="font-size:30px;fill:#ffffff;stroke-width:0px">JC!</text>
 </g>
</defs>       

<script type="text/javascript"> 
<![CDATA[ 
function color(evt)
{   
node = evt.target.correspondingUseElement;
    node.setAttributeNS(null, "style", "fill:blue");    
}
]]> 
</script>

<use xlink:href="#test" id="frufru" x="10" y="10" style="fill:#000000" />       

</svg>

2 Comentarios

  1. 36

    Como se puede ver en mi página de prueba, si se define el estilo visual de un elemento dentro de la <defs> sección de un documento que no puede prescindir de ese estilo en el <use> instancia, no a través de un atributo visual, style un atributo o una clase CSS aplicado a la <use>.

    Cambiar los atributos definidos en defs sobre el uso del elemento

    Además, usted puede utilizar un atributo visual en el <use> elemento de estilos de cascada hacia abajo a los elementos de la fuente; debe utilizar el estilo CSS para esto.

    Tendrás que:

    1. Asegurarse de que sus elementos definidos no tienen el estilo visual aplicado, y
    2. Utilizar CSS o establecer un manual que analiza-o-creado style atributo, por ejemplo,

      node.setAttribute('style','fill:blue');

    Como señalar aquí usted puede utilizar cualquiera de los setAttribute(...) o setAttributeNS(null,...) SVG atributos.

    Actualización: para responder A tu segunda pregunta:

    Lo que si la referencia es un elemento «g», que contiene 2 otros elementos, como un rectángulo y un texto?

    Usted puede utilizar las reglas CSS para seleccionar el pseudo-hijos de un <use>; ellos simplemente no existen. Lo que puede hacer, sin embargo, es aplicar la inmutable estilo que desea conservar en el interior de la <def> y, a continuación, aplicar el style que usted desea en el <use>.

    Por ejemplo:

    <defs>
      <g id="foo">
        <!-- Every rect instance should be filled with blue -->
        <rect width="54" height="58" x="1.5" y="1.5"
              fill="blue" />
        <!-- I want to be able to change text color per use
             so I must be sure not to specify the fill style -->
        <text x="-34" y="47" transform="matrix(0.668,-0.744,0.744,0.668,0,0)"
         style="font-size:30px;stroke-width:0px">JC!</text>
      </g>
    </defs>
    <use xlink:href="#foo" style="fill:orange" transform="translate(0,-100)" />
    <use xlink:href="#foo" style="fill:yellow" transform="translate(0, 100)" />

    Esto sólo funciona si usted desea que todos cambiante elementos a tener su conjunto de atributos de la misma manera.

    A diferencia de HTML, el marcado en SVG es la presentación. Lo que he sugerido es un poco de una mirada de lo que sucede a trabajar, pero en general <use> elementos están diseñados para crear una instancia de la apariencia de una definición. Si usted necesita apariencia personalizada por ejemplo, tal vez usted debería considerar la posibilidad de la clonación de los elementos, la modificación de las propiedades, y la adición de aquellos a los que el documento en lugar de cortar un <use>.

    • He fusionado su respuesta con su pregunta.
    • Gran respuesta, pero es posible que tengamos un mejor apoyo en FF ahora que en la época en que escribió esto. El estilo CSS todavía no penetra en la pseudo-elementos dentro de <use> elementos en webkit, pero si FF parece que funciona muy bien. A cruzar los dedos para un mejor apoyo pronto!

Dejar respuesta

Please enter your comment!
Please enter your name here