1

所以，这感觉像是一个简单的问题，但我就是不知道出了什么问题。我想要一个带有条纹颜色背景的 div 元素。为此，我决定尝试编写 SVG，以尽可能接近 W3C 代码。但是，当我尝试应用它时，它似乎不起作用。SVG 图像在其原始代码嵌入网页时确实可以正常显示（当然，没有 XML 和 DOCTYPE 标签），但在用作 CSS 背景时则不正确。为什么 CSS 不将此 SVG 图像设置为 DOM 元素的重复背景？

SVG

<?xml version="1.0" encoding="iso-8859-1" standalone="no"?>
<!DOCTYPE svg>
<SVG XMLNS="http://www.w3.org/2000/svg" XMLNS:XLINK="http://www.w3.org/1999/xlink" VIEWBOX="0 0 16 16">
  <TITLE>Translucent White Stripes</TITLE>
  <DESC>Translucent bottom-left-to-top-right diagonal white stripes</DESC>

  <POLYGON POINTS="00,16 16,00 08,00 00,08" STYLE="fill:#000000;fill-opacity:0.5"/>
  <POLYGON POINTS="08,16 16,08 16,16"       STYLE="fill:#000000;fill-opacity:0.5"/>
</SVG>

CSS

.striped {
  background-color: red;
  background-image: url("http://BHStudios.org/_images/backgrounds/translucentWhiteStripes.svg");
  background-size:16px 16px;
  background-repeat: repeat;
}

HTML

<!DOCTYPE HTML>
<HTML>
  <HEAD>
    <TITLE>SVG Test</TITLE>
  </HEAD>
  <BODY>
    <DIV CLASS="striped">Striped</DIV>
  </BODY>
</HTML>

这是一个 JSBin，以防万一：http: //jsbin.com/isihuy/3/edit

要修复的编辑

以下是我为修复它所做的代码更改：

SVG

我用 UTF-8 重新编码它，并在 XML 标记中做了一个 not 。我删除了该viewbox属性并将其替换为heightand width。我将所有 SVG 标记和属性案例更改为 W3C 指定的案例：

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
  <title>Translucent White Stripes</title>
  <desc>Translucent bottom-left-to-top-right diagonal white stripes</desc>

  <polygon points="00,16 16,00 08,00 00,08" style="fill:#000000;fill-opacity:0.5"/>
  <polygon points="08,16 16,08 16,16"       style="fill:#000000;fill-opacity:0.5"/>
</svg>

网络配置

事实证明这实际上是最大的问题：application/octet-stream尽管我在文件中添加了正确mimeMap的 SVG ，但服务器仍将其作为web.config. 为了解决这个问题，我必须在它前面加上一个remove标签：

<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".svg" />
            <mimeMap fileExtension=".svg"  mimeType="image/svg+xml"/>
        </staticContent>
    </system.webServer>
</configuration>
4

1 回答 1

1

SVG 通常区分大小写。唯一不是这样的情况是您将其嵌入到不区分大小写的容器中，例如 HTML 文档。修复独立 SVG 文件中所有 SVG 标记和属性的大小写，使其符合SVG 规范并删除无效<!DOCTYPE svg>行，您应该没问题。

于 2013-02-19T20:25:56.610 回答