所以，这感觉像是一个简单的问题，但我就是想不通哪里出了问题。我想要一个带有条纹颜色背景的 div 元素。为此，我决定尝试编写 SVG，以尽可能接近 W3C 代码。但是，当我尝试应用它时，它似乎不起作用。 当 SVG 图像的原始代码嵌入到网页中时(当然，没有 XML 和 DOCTYPE 标记)，SVG 图像会正确显示，但用作 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 of this。我删除了 viewbox 属性并将其替换为 height 和 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>
web.config
事实证明这实际上是最大的问题:尽管我为 SVG 添加了正确的 mimeMap 到web.config 文件。为了解决这个问题，我必须在它之前加上一个 remove 标签:
<configuration>
<system.webServer>
<staticContent>
<remove fileExtension=".svg" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml"/>
</staticContent>
</system.webServer>
</configuration>
最佳答案
SVG 通常区分大小写。唯一不是的情况是将它嵌入到像 HTML 文档这样不区分大小写的容器中。修复独立 SVG 文件中所有 SVG 标签和属性的大小写，使其符合 SVG specification并删除无效的 <!DOCTYPE svg>行，你应该没问题。
关于html - 为什么我的 SVG 没有被用作重复背景图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14960107/