Html 为什么不是'；我的SVG没有被用作重复的背景图像吗？_Html_Css_Svg

Html 为什么不是'；我的SVG没有被用作重复的背景图像吗？

html css svg

Html 为什么不是'；我的SVG没有被用作重复的背景图像吗？,html,css,svg,Html,Css,Svg,所以，这感觉像是一个简单的问题，但我就是不知道出了什么问题。我想要一个背景为条纹色的div元素。为此，我决定尝试编写SVG，以尽可能接近W3C代码。然而，当我尝试应用它时，它似乎不起作用当SVG图像的原始代码嵌入到网页中（当然，没有XML和DOCTYPE标记）时，SVG图像确实正确显示，但当用作CSS背景时，SVG图像不会正确显示为什么CSS不将此SVG图像设置为DOM元素的重复背景？ SVG HTML web.config 事实证明，这实际上是最大的问题：服务器将其作为一个应用程序/octet

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

SVG HTML web.config 事实证明，这实际上是最大的问题：服务器将其作为一个

应用程序/octet流

，尽管我在

web.config

文件中添加了适合SVG的

mimeMap

。为了解决这个问题，我必须在它前面加一个

remove

标记：

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

SVG通常区分大小写。唯一一次它不是，如果你把它嵌入一个不区分大小写的容器，比如HTML文档。将独立SVG文件中所有SVG标记和属性的大小写修改为符合，并删除无效的

行，您应该可以。

SVG通常区分大小写。唯一一次它不是，如果你把它嵌入一个不区分大小写的容器，比如HTML文档。将独立SVG文件中所有SVG标记和属性的大小修改为符合，并删除无效的

行，您应该会没事。

可能是因为您没有设置SVG的大小？（宽度、高度）？您使用的是什么浏览器、什么版本和什么操作系统？鉴于SVG区分大小写，并且您已将所有标记都用大写字母书写，我对它的呈现感到相当惊讶。@Nitram我的印象是这些浏览器已被弃用…@JulesMazur所有当前排名前5的浏览器，Windows 7和8。可能是因为您没有设置SVG的大小？（宽度、高度）？您使用的是什么浏览器、什么版本和什么操作系统？鉴于SVG区分大小写，而且您已将所有标记都写在大写字母中，我对它的呈现感到相当惊讶。@Nitram我的印象是这些浏览器已被弃用…@JulesMazur所有当前排名前五的浏览器，Windows 7和8。

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

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

<?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>

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