1

ですから、これは簡単な質問のように感じますが、何が悪いのか理解できません。背景が縞模様のdiv要素が必要です。これを行うために、私はSVGを作成して、W3Cコードにできるだけ近づけるようにすることにしました。しかし、それを適用しようとすると、うまくいかないようです。SVGイメージは、生のコードがWebページに埋め込まれている場合（もちろん、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タグでこれを作成しませんでした。属性を削除して、とviewboxに置き換えました。すべてのSVGタグと属性のケースをW3C指定のケースに変更しました。heightwidth

<?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にapplication/octet-stream適切なものを追加したにもかかわらず、サーバーはそれをとしてディッシュアウトしていました。これを修正するには、その前にタグを付ける必要がありました。mimeMapweb.configremove

<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 に答える