SVG 中的 CSS 变量答案

【问题标题】：CSS Variables in SVGSVG 中的 CSS 变量
【发布时间】：2021-01-09 15:34:08
【问题描述】：

我在我的页面中引用了一个 SVG 图像：

<object type="image/svg+xml" data="Images/help.svg" class="svgHelp"></object>

我希望能够使用 CSS 变量来设置颜色。所以，我有以下 SVG 代码：

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    @import url('/site.css');
  </style>
  <path fill="var(--shape)" d="M9.5,15 C10.0522847,15 10.5,15.4477153 10.5,16 C10.5,16.5522847 10.0522847,17 9.5,17 C8.94771525,17 8.5,16.5522847 8.5,16 C8.5,15.4477153 8.94771525,15 9.5,15 Z M9.5,0 C11.9852814,0 14,2.01471863 14,4.5 C14,5.62866311 13.5819742,6.69223142 12.8447962,7.51046545 L12.6819805,7.68198052 C11.3219676,9.0419934 10.1146376,10.9892252 10.0076903,12.7498371 L10,13 L9,13 C9,10.8402177 10.3786205,8.57112697 11.9748737,6.97487373 C12.6273393,6.32240814 13,5.44133935 13,4.5 C13,2.56700338 11.4329966,1 9.5,1 C7.6314366,1 6.10487355,2.4642776 6.00517886,4.3079648 L6,4.5 L5,4.5 C5,2.01471863 7.01471863,0 9.5,0 Z"></path>
</svg>

site.css 文件看起来像这样（无论如何重要的部分）：

:root {
    --shape: red;
}

这一切都很好。变量被使用并且图像是红色的。我的问题是我在另一个 CSS 文件中有一个变量。它不允许我在 SVG 文件中使用其他 CSS 变量或在 site.css 中为该 --shape 变量设置它。

所以，如果有一个 theme1.css 具有以下内容：

:root {
    --shape2: blue;
}

我不能去 site.css 并这样设置变量（好吧，我可以，它只是不起作用）：

:root {
    --shape: var(--shape2);
}

假设我的网站允许不同的主题。 theme1.css 声明了站点的所有变量。这些变量包含所有颜色。为了主题化，我们只需切换到 theme2.css ，它声明了所有相同的变量，但颜色不同。我想在 SVG 文件或 site.css 中使用这些变量，以便我可以使用相同的变量名称但根据主题获得不同的颜色。但是这些都不起作用。

奇怪的是，在 site.css 文件中声明的 --shape 在 SVG 中可以正常工作。我可以改变颜色，没有问题。一旦我尝试使用另一个文件中的变量设置该变量，它就不起作用。

还有其他想法吗？

因此，最终，我希望拥有可以使用来自另一个 CSS 文件的变量设置样式的外部 SVG 文件（但请阅读上文以了解为什么我被卡住了）。

【问题讨论】：

--shape: var(--shape2); 应该可以正常工作，你能分享一个工作代码来演示这个问题吗？
好的，我明白了。你不能用object 做你想做的事。它的范围仅限于内部，不能从外部获取 CSS。您需要在代码中直接使用 SVG
@TemaniAfif 我可以使用外部文件中的 CSS。 --shape 变量工作正常。问题是尝试使用在另一个文件中声明的全局变量似乎是不允许的。所以你可能对范围是正确的。也许我只能使用该 CSS 文件中声明的内容，而不能使用其他任何内容。嗯
--shape 工作正常，因为它位于对象内部的 CSS 文件中。所以你的范围只是那个文件和里面的东西。对象元素之外的任何其他 CSS 文件在其内部都不起作用
@TemaniAfif 我将把它作为答案发布。我有一种有趣的感觉，可能是这样，但我真的希望不是这样。谢谢

标签： css svg css-variables

【解决方案1】：

正如上面@TemaniAfif 所提到的，您似乎只能访问所引用的 CSS 文件。任何其他文件都将超出范围，您将无法使用这些变量。

【讨论】：

【解决方案2】：

使用use 代替对象，如下所示：

:root {
  --shape2: blue;
}

<!-- make this on the top of your code  -->
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="visibility:hidden;width:0;height:0;">
  <defs>
  <style>
    :root {
       --shape: var(--shape2,red);
    }
  </style>
  <path id="shape" fill="var(--shape)" d="M9.5,15 C10.0522847,15 10.5,15.4477153 10.5,16 C10.5,16.5522847 10.0522847,17 9.5,17 C8.94771525,17 8.5,16.5522847 8.5,16 C8.5,15.4477153 8.94771525,15 9.5,15 Z M9.5,0 C11.9852814,0 14,2.01471863 14,4.5 C14,5.62866311 13.5819742,6.69223142 12.8447962,7.51046545 L12.6819805,7.68198052 C11.3219676,9.0419934 10.1146376,10.9892252 10.0076903,12.7498371 L10,13 L9,13 C9,10.8402177 10.3786205,8.57112697 11.9748737,6.97487373 C12.6273393,6.32240814 13,5.44133935 13,4.5 C13,2.56700338 11.4329966,1 9.5,1 C7.6314366,1 6.10487355,2.4642776 6.00517886,4.3079648 L6,4.5 L5,4.5 C5,2.01471863 7.01471863,0 9.5,0 Z"></path>
  </defs>
</svg>
<!-- -->

<!-- what you will use inside the code -->
<svg>
  <use xlink:href="#shape"  />
</svg>

【讨论】：

【解决方案3】：

我决定创建一个 Web 组件。

export class MY_SVG extends HTMLElement {
    constructor() {
        super();

        this.Loaded;
    }

    connectedCallback() {
        if(!this.Loaded)
            this.LoadImage();
    }

    async LoadImage() {
        let src = this.getAttribute('src');

        const res = await fetch(src);

        const textTemplate = await res.text();

        this.appendChild(new DOMParser().parseFromString(textTemplate, 'text/html').querySelector('svg'));

        this.Loaded = true;
    }
}

customElements.define('my-svg', MY_SVG);

你会这样使用它：

<my-svg src="folder/image.svg"></my-svg>

现在，我可以随心所欲地使用 css。我发现这是我最喜欢的解决方案。希望这在某些时候也能对其他人有所帮助。

【讨论】：