« つま先歩きでカモシカ脚 | トップページ | 打ち上げじゃなく反省会 »

2014.02.20

インラインSVGでClipPathが効かないならばHTMLにBASEタグがあるかもしれない。

数日間悩み続けて、どうにか解決。「へぇ、そうなんだ」てなことだったので、書いておきます。

SVGで、とある図形に、クリッピング領域を適用したい場合は、例えばですが、以下のようにしますよね。

<svg>
  <defs>
    <clipPath id="clip">
      <rect x="100" y="100" width="320" height="240"/>
    </clipPath>
  </defs>
  <g clip-path="url(#clip)">
    <!-- いろんな図形... -->
  <g>
</svg>

7行目のg要素にクリッピング矩形を適用しようとしているのですが、HTML内に埋め込まれたインラインSVGで、なぜか機能しなかった。ブラウザはChrome。

いろいろ調べてみると、HTMLのBASEタグで相対パスの基点を指定しているときだけ、クリッピング領域が有効にならないということがわかりまして。生のSVGとか、BASEタグを含まないページではちゃんと動作する。

というのも、#clipが、既に相対パスなので、BASEで指定されたURLから#clipを探そうとして失敗するのだとか。

ということで、絶対パスで参照すればOKでした。クリッピング領域だけじゃなくて、相対パスによる参照はすべてこのルールが適用されます。

BASEを指定していることも忘れていたけど、そもそも「相対パス」という認識が無かったな。

« つま先歩きでカモシカ脚 | トップページ | 打ち上げじゃなく反省会 »

プログラミング」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

« つま先歩きでカモシカ脚 | トップページ | 打ち上げじゃなく反省会 »

2020年5月
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
フォト

Google AdSense

銀の弾丸

無料ブログはココログ

他のアカウント