Question

我在网上看到了几个示例，展示了如何将SVG图像导入HTML并使用包含在单独CSS中的CSS对其进行样式化。但是，当涉及动态样式化SVG时，事情变得棘手。

我们说我有一个支持不同主题的应用程序。用户可以在应用程序运行时交换主题。对于我们这里的目的，主题机制被封装在某处。它是使用自定义属性还是一些解析技术是无关紧要的。我们不应该尝试任何有趣的东西来解决这个机制。 没有JavaScript 。

我想要显示以下样式的SVG，例如按钮图标：

<?xml-stylesheet type="text/css" href=".path/to/styles/app.css" ?>
<svg>
    <circle class="left-circle" cx="33" cy="50" r="33" fill="red" />
    <circle class="right-circle" cx="66" cy="50" r="33" fill="green" />
</svg>

使用<object>标记在HTML中导入SVG。 HTML使用与SVG相同的样式表：

<link rel-"stylesheet" href=".path/to/styles/app.css" data-theme-hook="true"/>
<button>
    <object type="image/svg+xml" data="./path/to/images/button.svg"></object>
    <span>The Button</span>
</button>

data-theme-hook属性告诉主题机制发挥其魔力。 CSS看起来像这样：

button {
    color: black; /* Theming mechanism knows how to swap */
    background-color: white;  /* Theming mechanism knows how to swap */
}
.left-circle {
    fill: green; /* Theming mechanism knows how to swap */
}
.right-circle {
    fill: red; /* Theming mechanism knows how to swap */
}

现在，这一切都运作良好。我启动了我的应用程序，然后我看到了带有SVG图像的按钮。当我交换主题时出现问题。 HTML中的所有内容都会按预期更改颜色。但SVG元素＆＃39;颜色保持固定，可能是因为SVG在一个单独的文档中，并且通过xml-stylesheet导入的样式是静态的....

对我而言，这听起来应该是一个非常简单的场景。我只是做错了吗？或者，如果没有JavaScript干扰，这是不可能的？

我可以使用我的HTML，CSS和SVG动态地将SVG图像设置为单独的文件，而不使用任何JavaScript吗？

0 个答案: