2017-09-27 17 views
0

Je place un svg (photo Inkscape) dans un ceComment manipuler style long de Inkscape

comme balise d'objet
<div class='rbis-svg-row'> 
    <div class='rbis-salta-svg'> 
     <object id='svg1' data='factory4-network-salta.svg' type='image/svg+xml' width='900px'> 
    </object> 
    </div> 
</div> 

Je peux alors accéder aux éléments du svg avec

<script> 
    document.getElementById("svg1").addEventListener("load", function() { 
     var doc = this.getSVGDocument(); 
     var rect = doc.querySelector('#rectABC'); 
     // Id for an object is rectABC                        

     var theStyle = reg.getAttribute('style'); 

    }); 

</script> 

MAIS!

Le style est assez long

"color:#000000;cliprule:nonzero;display:inline;overflow:visible;\ 
visibility:visible;opacity:0.58999999;isolation:auto;\ 
mix-blend mode:normal;colorinterpolation:sRGB;\ 
color-interpolationfilters:linearRGB;solid-color:#000000;\ 
solid-opacity:1;fill:#fcaf3e;fill-opacity:1;fill-rule:nonzero;\ 
stroke:#000000;stroke-width:3;stroke-linecap:round;\ 
stroke-linejoin:miter;stroke-miterlimit:4;\ 
stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;\ 
marker:none;color-rendering:auto;image-rendering:auto;\ 
shape-rendering:auto;text-rendering:auto;enable-background:accumulate" 

est-il un bon moyen de changer un seul propriété dans le style? Ou dois-je extraire la chaîne et manipuler la chaîne?

/gh

Répondre

0

Vous pouvez utiliser la même méthode que vous le feriez pour HTML.

element.style.fill = "red"; 

Non que les propriétés de style dans l'objet style ne sont pas toujours le même nom que l'attribut XML. Si l'attribut a un trait d'union, la propriété aura un nom de chameau. Par exemple, l'attribut fill-opacity peut être modifié avec:

element.style.fillOpacity = 1;