html - Base64 编码的 SVG 无法通过 HTML 标记中的内联样式或通过 CSS 中的类进行着色

Question

我有一个 SVG Logo ，我想在单个页面上放置几次。每次它都应该以不同的颜色显示。这些颜色是通过 Wordpress 后端定义的。颜色通过这样的片段应用:

<div class="logo" style="fill:<?php the_field('op-about-color', 'option'); ?>;"></div>

SVG 放在 CSS 中，是 base64 编码的。 <svg>里面标签我还包括类 logotest .但问题是 SVG 没有变色。我用 base64 编码的 svg 创建了一个示例笔:

http://codepen.io/rpkoller/pen/DuqBh

它保持黑色。与内联样式将其填充为红色甚至为 sktest 分配绿色填充颜色的事实相反。类根本没有影响。

如果我将未编码的 svg 代码直接放入 html 到 div 中，一切都会按预期工作。内联样式分配以及 logotest类:

http://codepen.io/rpkoller/pen/rdFup

有没有办法让 base64 变体正常运行？最好的问候拉尔夫

Answer 1

您的问题在于您的实现。可以这么说，问题不一定是 base64，而是将图像作为 CSS 背景包含在内与将其包含在 HTML 中的区别。

在 HTML 中...您可以从字面上阅读 HTML 中的 SVG 代码。因为该 HTML 标记存在于 DOM 中，所以它可以通过您的类通过 CSS 进行编辑。如果您右键单击该页面并单击“查看页面源代码”，您将在 HTML 中看到 SVG 代码。

在 CSS 中，您将图像添加为背景图像。背景图像不会获得输出到 DOM 中的任何类型的 HTML 标记。它是……一种“效果”，如果您想这样说，它应用于您定义的某些 HTML 元素。如果您右键单击该页面并单击“查看页面源代码”，您将看到您正在应用背景图像的元素，但没有输出额外的标记供进一步的 CSS 读取和修改。

---

您有哪些选择？好吧，您可以将内联样式直接应用于 SVG 图像，但这绝不是动态的，因此您将无法为类名等做后端代码段。

另一种选择是像您已经完成的那样包含 SVG，称为“内联 SVG”。这样您就可以使用 CSS 代码来实现它。