Question

我在HTML中使用内嵌SVG代码的CSS样式存在问题。我有一个HTML页面index.html，CSS文件style.css和SVG文件external.svg。在SVG文件中，我在符号标签中创建了一些六边形对象。我只将此文件用作svg对象的库。在HTML文件中，我使用内联SVG，它使用SVG文件中的对象。 CSS文件应该改变HTML文件中某些内联SVG文本的颜色。

这是来自HTML文件的内联SVG代码的示例。 <use ...>标记从SVG文件中导入对象。

<svg id="zab4text" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,300,300">
  <a xlink:href="https://www.google.com" xlink:title="google">
    <use xlink:href="external.svg#hex4" fill="none"/>
    <text font-size="40" font-weight="bold" font-family="DejaVu Sans"> 
      <tspan x="55" y="105">first line</tspan>
      <tspan x="55" y="150">second line</tspan>
      <tspan x="75" y="230">third line</tspan>
    </text>
  </a>
</svg>

用于设计这部分代码的CSS是：

#zab4text {
  width: 150px;
  height: 150px;
  fill: red;
}

结果应该是六边形的红色文字。六边形很好，但文字是黑色的。 fill属性对文本没有影响。

当我想要一个红色文本时，我必须直接向<text>标签提供一个id并设置样式。然后就行了。

我在检查员中查看了Google Chrome 55发生了什么。当fill属性用于示例中的svg标记时，我在检查器中看到文本的填充颜色是从zab4text继承的，但它没有设置颜色。如果fill属性是用于文本标记，那么这是他的填充颜色，它工作正常。

可能是Google Chrome中的一些错误吗？当我第一次打开HTML页面时，颜色是红色的，但当我打开指向的链接时，它将颜色变为黑色，我无法将红色恢复。我在firefox 50中试过它并且行为相同。

我知道Google Chrome外部文件行为，我使用简单的python3网络服务器sudo python3 -m http.server 80。

有人知道我错了什么或问题出在哪里？

Answer 1

所以我找到了答案。这条线

<text font-size="40" font-weight="bold" font-family="DejaVu Sans">

应该是

<text font-size="40" font-weight="bold" font-family="DejaVu Sans" fill="inherit">

然后它将采用我尝试过的所有浏览器中<svg>标记的颜色。

CSS文件样式中内联SVG文本的fill属性的奇怪行为

1 个答案: