SVG中的CSS变量

问题描述

我在页面中引用的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变量，也不能在--shape变量的site.css中设置该变量。

因此，如果存在带有以下内容的theme1.css：

:root {
    --shape2: blue;
}

我不能转到site.css并按如下方式设置变量（嗯，我可以，它只是行不通的）：

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

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

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

还有其他想法吗？

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

解决方法

代替{ const std::string& tmp = stringstream.str(); const char* cstr = tmp.c_str(); }来使用对象，如下所示：

use

:root {
  --shape2: blue;
}

,

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

,

我决定创建一个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了。我发现这是我最喜欢的解决方案。希望这也会在某些时候对别人有所帮助。