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

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年7月
      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

銀の弾丸

無料ブログはココログ

他のアカウント