Question

我将svg（Inkscape图片）放置在对象标记中，如下所示

<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>

然后我可以使用

访问svg中的元素

<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>

BUT！

风格很长

"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"

有没有什么好方法可以更改样式中的单个属性？或者我必须提取字符串并操纵字符串？

/ GH

Answer 1

您可以使用与HTML相同的方法。

element.style.fill = "red";

style对象中的样式属性并不总是与XML属性具有相同的名称。如果属性具有连字符，则该属性将具有驼峰式命名。例如，fill-opacity属性可以通过以下方式更改：

element.style.fillOpacity = 1;

如何从inkscape操纵长样式

1 个答案: