1

svgでロゴを書きたかったのですが、意外にも、で定義されたオブジェクトを再利用できないことがわかりました<defs>...</defs>。Chromeで試してみました。

例を参照してください：

  1. test1.htmlが機能せず、rectが描画されませんでした。

    <!DOCTTYPE html>
<html>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         width="480" height="360">
      <defs>
        <rect id="helo" x="0" y="0" height="20" width="20" />
      </defs>
      <use xlink:href="#helo" />
    </svg>
  </body>
</html>

  2. しかし、test2.svgは機能します。

    <?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
              "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="480" height="360">
  <defs>
    <rect id="helo" x="0" y="0" height="20" width="20" />
  </defs>
  <use xlink:href="#helo" />
</svg>

test1.htmlを機能させるには何が必要ですか？どうもありがとう：）

4

2 に答える 2

1

これはWebkitのバグのようです： 外部SVGのインポート（WebKitを使用） https://bugs.webkit.org/show_bug.cgi?id=12499

SVGアイコンを作成する場合は、別の.svgファイルで作成し、objectタグを付けてHTMLに追加します。SVGファイルに変更を加えると、Webサイト上のすべてのインスタンスが変更されるため、とにかくそれはより良いでしょう。

于 2012-07-23T14:34:38.190 に答える
0

defsバグは修正されたようですが、HTMLページのSVGでタグ内のオブジェクトを再利用しようとする場合、これxmlns:xlink="http://www.w3.org/1999/xlink"は重要であり、SVGタグに追加する必要があるという重要な注意点が1つあります。それがないと、hrefは解決されません。

于 2013-12-30T22:31:38.840 に答える