Get or set css class value from external SVG file using javascript(jquery)

Question

I have a svg file that contains some css classes in this format

  <style type="text/css" id="style1">
    <![CDATA[
      .fill1 {fill:#D2D3D5}
      .fill2 {fill:#A9ABAE}
      .fill3 {fill:#96989A}
    ]]>
  </style>

The svg file is displayed in an HTML file by using the following tag.

<object id="testObject" type="image/svg+xml" data="img/test.svg"></object>

Is there some way for me to get fill value of fill1,fill2 and fill3 using javascript or jquery. Also would it be possible to change these fill colors?

ccprog · Accepted Answer · 2019-03-04 22:26:22Z

1

With generic Javascript, you can obtain the CSSStyleSheet object and manipulate any individual CSSStyleDeclaration:

// obtain document of object
var objectDoc = document.getElementById('testObject').contentDocument;
// obtain stylesheet
var stylesheet = objectDoc.getElementById('style1').sheet;

// find a certain rule
var rule2 = Array.from(stylesheet.cssRules).find(function (rule) {
    // make sure you reference a style rule and identify by selector string
    return rule.type === CSSRule.STYLE_RULE && rule.selectorText === '.fill2';
});

// get fill value
rule2.style.getPropertyValue('fill');
// set a different fill
rule2.style.setProperty('fill', '#676869');

edited Mar 4, 2019 at 22:26

answered Mar 3, 2019 at 16:27

ccprog

22.2k4 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Thomas Over a year ago

Thanks, but I get error "Uncaught TypeError: rule2.setProperty is not a function" when trying this

ccprog Over a year ago

oops, sorry, there was a CSSStyleRule.style missing. See edit.

Thomas Over a year ago

Works perfectly. Thanks a lot!

Collectives™ on Stack Overflow

Get or set css class value from external SVG file using javascript(jquery)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related