How to access style properties of externally insert svg file?-CodePudding

Here I can access the style of the svg:

svg {
  fill: skyblue;
}

<svg viewBox="0 0 100 100" width="500px" height="500px"
    xmlns="http://www.w3.org/2000/svg" data-name="Layer 1">
    <path d="M6,6A2,2,0,0,1,8,4,1,1,0,0,0,8,2,4,4,0,0,0,4,6V9a2,2,0,0,1-2,2,1,1,0,0,0,0,2,2,2,0,0,1,2,2v3a4,4,0,0,0,4,4,1,1,0,0,0,0-2,2,2,0,0,1-2-2V15a4,4,0,0,0-1.38-3A4,4,0,0,0,6,9Zm16,5a2,2,0,0,1-2-2V6a4,4,0,0,0-4-4,1,1,0,0,0,0,2,2,2,0,0,1,2,2V9a4,4,0,0,0,1.38,3A4,4,0,0,0,18,15v3a2,2,0,0,1-2,2,1,1,0,0,0,0,2,4,4,0,0,0,4-4V15a2,2,0,0,1,2-2,1,1,0,0,0,0-2Z"/>
</svg>

But its style is not changed when svg is added as external file:

img {
  fill: skyblue;
}
/* etc. Not working
    img > svg {
      fill: skyblue;
    }
*/

<img src="brackets.svg" width="500px" height="500px">

Or; Can I somehow use the css root variable in the svg file? e.g. <svg fill="var(--textColor)" > </svg>

CodePudding user response：

external file cannot be accessed with css.
css variable cannot be used in external svg file because svg is not
dom element.
The best solution would be to inject svg into the html element;

:root {
  --textColor: skyblue;
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >
<path fill="var(--textColor)"
d="M6,6A2,2,0,0,1,8,4,1,1,0,0,0,8,2,4,4,0,0,0,4,6V9a2,2,0,0,1-2,2,1,1,0,0,0,0,2,2,2,0,0,1,2,2v3a4,4,0,0,0,4,4,1,1,0,0,0,0-2,2,2,0,0,1-2-2V15a4,4,0,0,0-1.38-3A4,4,0,0,0,6,9Zm16,5a2,2,0,0,1-2-2V6a4,4,0,0,0-4-4,1,1,0,0,0,0,2,2,2,0,0,1,2,2V9a4,4,0,0,0,1.38,3A4,4,0,0,0,18,15v3a2,2,0,0,1-2,2,1,1,0,0,0,0,2,4,4,0,0,0,4-4V15a2,2,0,0,1,2-2,1,1,0,0,0,0-2Z" />
</svg>

CodePudding user response：

You can use a <use> element instead.
Give your path element an unique id and strip all fill attributes:

Svg markup

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >
<path id="icon"
d="M6,6A2,2,0,0,1,8,4,1,1,0,0,0,8,2,4,4,0,0,0,4,6V9a2,2,0,0,1-2,2,1,1,0,0,0,0,2,2,2,0,0,1,2,2v3a4,4,0,0,0,4,4,1,1,0,0,0,0-2,2,2,0,0,1-2-2V15a4,4,0,0,0-1.38-3A4,4,0,0,0,6,9Zm16,5a2,2,0,0,1-2-2V6a4,4,0,0,0-4-4,1,1,0,0,0,0,2,2,2,0,0,1,2,2V9a4,4,0,0,0,1.38,3A4,4,0,0,0,18,15v3a2,2,0,0,1-2,2,1,1,0,0,0,0,2,4,4,0,0,0,4-4V15a2,2,0,0,1,2-2,1,1,0,0,0,0-2Z" />
</svg>

Use element in html

<svg>
  <use href="icon.svg#icon" style="fill:red" />
</svg>

Example (using a inlined svg)

<svg style="display:none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >
    <path id="icon"
    d="M6,6A2,2,0,0,1,8,4,1,1,0,0,0,8,2,4,4,0,0,0,4,6V9a2,2,0,0,1-2,2,1,1,0,0,0,0,2,2,2,0,0,1,2,2v3a4,4,0,0,0,4,4,1,1,0,0,0,0-2,2,2,0,0,1-2-2V15a4,4,0,0,0-1.38-3A4,4,0,0,0,6,9Zm16,5a2,2,0,0,1-2-2V6a4,4,0,0,0-4-4,1,1,0,0,0,0,2,2,2,0,0,1,2,2V9a4,4,0,0,0,1.38,3A4,4,0,0,0,18,15v3a2,2,0,0,1-2,2,1,1,0,0,0,0,2,4,4,0,0,0,4-4V15a2,2,0,0,1,2-2,1,1,0,0,0,0-2Z" />
    </svg>

<p>
<svg>
<use href="#icon" style="fill:red" />
</svg>
<svg>
<use href="#icon" style="fill:green" />
</svg>
</p>