Question

所以，这感觉就像一个简单的问题，但我无法弄清楚错误是什么。我想要一个div元素，背景是条纹颜色。为此，我决定尝试编写SVG，以尽可能接近W3C代码。但是，当我尝试应用它时，它似乎无法正常工作。 当原始代码嵌入到网页中时（当然，没有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标记中创建了一个。我删除了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

事实证明这实际上是最大的问题：尽管我将application/octet-stream SVG添加到mimeMap文件中，但服务器仍将其作为web.config发布。要解决此问题，我必须在其前面添加remove标记：

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

Answer 1

SVG通常区分大小写。唯一不适合的是，如果您将其嵌入不区分大小写的容器（如HTML文档）中。将您的独立SVG文件中的所有SVG标记和属性的大小写修改为SVG specification，并删除无效的<!DOCTYPE svg>行，您应该没问题。

为什么我的SVG不能用作重复的背景图像？

SVG

CSS

HTML

修改

SVG

的web.config

1 个答案: