How SVG Fragment Identifiers Work | CSS-Tricks
The viewBox attribute goes: left, top, width, height. Note that second attribute, the top, notching up by 32 each time. We’re just showing a different part of the whole document. Adding those special viewBox’s into the SVG itself You can drop those special, specific viewBox values into the SVG in a <view> element, that is specifically for this: <view id="icon-clock-view" viewBox="0 0 32 32" /> <vi
svgのurlにハッシュ付けてターゲット擬似クラスを利用してスタイルを切り替える - Qiita
2016.01.17現在 safariで上手くいかない。 backgroundはSafariとChromeで上手くいかない。 objectタグはどの環境でも上手くいったが、重いし、objectタグのdataにハッシュ付けたURL入れるとスクロールが反応しちゃう。 デモ http://jsdo.it/ksk1015/gAoi <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> <style id="red">#red:target ~ * {fill: red;}</style> <style id="blue">#blue:target ~ * {fill: blue;}</style> <style id="green">#green:target ~ * {fill: green;}</style> <circl
asamuzaK.jp : 使えば爽快！ SVG Sprite
改訂版を出しましたので、そちらをご参照ください。 Safari8でSVG Fragment Identifiers（以下、svg#fragment）に対応してきた。 Firefox、Chrome、IEはすでに対応済みなので、これで主要ブラウザの足並みが揃った。 注：ところが、Safariの実装にはバグがあった…orz。 WebKit Bugzilla上では既に修正済みとなっているが、Safari9.xまでは依然としてバグが残っている。 これまで、PNGなどの画像を利用したCSSスプライトやアイコンフォントを使う気になれなかったが、svg#fragmentを使ったSVGスプライトならいけるな、と思い、折を見てテストを繰り返し、ようやくその方法が固まった。 そもそもCSSスプライトやアイコンフォントに対する個人的な不満は CSSスプライト 切り出す画像の領域を逐一CSSで指定しなければならない
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
