Получить или установить значение класса CSS из внешнего файла SVG, используя JavaScript (JQuery)

Question

У меня есть файл SVG, который содержит некоторые классы CSS в этом формате

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

Файл SVG отображается в файле HTML с помощью следующего тега.

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

Isесть какой-то способ для меня получить значения заполнения fill1, fill2 и fill3, используя javascript или jquery.Также можно ли изменить эти цвета заливки?

Answer 1

С помощью стандартного Javascript вы можете получить объект CSSStyleSheet и управлять любым отдельным 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');