♪Story in the SVG また繋がるフラグメント (c) AAA

symbol & useをひとしぼり! NEW SVGスプライト!

使えば爽快! SVG Spriteの改訂版。 SVGのsymbolとuseを使ってSVGスプライトを利用する方法を、再度、考えてみた。

今回のSVGのサンプルソース。 ターゲットになっていないuse要素はCSSで非表示にしてしまうことがコツといえばコツ。 あと、ルートのsvg要素には、widthもheightもつけず、viewBoxのみ。


<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 128 128">
  <style>
    use:not(:target) {
      display: none;
    }
  </style>
  <symbol id="rect1">
    <title>Rect</title>
    <rect x="1" y="1" width="126" height="126"/>
  </symbol>
  <symbol id="circle1">
    <title>Circle</title>
    <circle cx="64" cy="64" r="64"/>
  </symbol>
  <symbol id="triangle1">
    <title>Triangle</title>
    <polygon points="0,128 128,128 64,0"/>
  </symbol>
  <use id="rect" xlink:href="#rect1" fill="rgb(255,0,0)"/>
  <use id="circle" xlink:href="#circle1" fill="rgb(0,255,0)"/>
  <use id="triangle" xlink:href="#triangle1" fill="rgb(0,0,255)"/>
</svg>

"♪Story in the SVG また繋がるフラグメント (c) AAA"の全文を読む

♪1年2年は夢のうち まさかと笑って待てば (c) 中島みゆき

プジオの2度目の車検

気がついたら、もうプジオの2度目の車検の時期を迎えていた。 入庫時の走行距離は38,584kmで前回の車検時は27,125km。 なので、平均すれば年間5,730km…ってところ。 住環境・家庭環境的に車なしの生活は今は考えられないけど、走行距離は年々少なくなっているなぁ。

"♪1年2年は夢のうち まさかと笑って待てば (c) 中島みゆき"の全文を読む

♪1999 Scalable Object 輝ける時代の救世主 (c) 聖飢魔II

リンクやボタンの子孫object要素で読み込んだSVGをインタラクティブにする

a要素の子孫のobject要素やbutton要素の子孫のobject要素でSVGを読み込む場合には、そのままではリンクやクリックが効かず、ちょっと困ったことになる。

その対処法はすでにいろんな方が指摘していて、


a, button {
  display: inline-block;
}
a object, button object {
  pointer-events: none;
}

といった具合にCSSを指定すればよい。
SVGをobject要素で活用する | 水無月ばけらのえび日記
SVGをobject要素で表示してリンクにする - ういはるかぜの化学 - subtech
Retina対応にSVGを使う方法とリンクを張る時の注意点 - ROCHAS

ところが、当然のことながらSVGにマウスイベントなどが伝わらないので、:hoverで色が変わるようにSVG内にCSSで指定していても色は変わらない…orz

そこで、a要素やbutton要素が受け取ったイベントを利用して、子孫のSVGをインタラクティブにするJavaScriptを書いてみた。 object要素のSVGでインタラクティブにCSSを変更するテスト

"♪1999 Scalable Object 輝ける時代の救世主 (c) 聖飢魔II"の全文を読む

♪Move over, don't do it over, Cause it's over, Generation next (c) Spice Girls

特定のブラウザにはES2015以降をそのまま配信する方法

せっかくES2015でJavaScriptを書きあげたとしても、結局、ES5にトランスパイルしたものしか使ってないのはなんだかもったいない。 例えば、kangaxを見ると、Firefox 45、Chrome 49、Edge 13ではすでに8割方、ES2015に対応している。

元のES2015のファイルも残っているわけだし、だったらそれらのブラウザにはES2015をはじめとした次世代のES.nextをそのまま適用させる方法はないものか、と考えてみた。

"♪Move over, don't do it over, Cause it's over, Generation next (c) Spice Girls"の全文を読む

Sign 'O' The Times (c) Prince

Firefoxのアドオンが署名されてない? 今一度ご確認を

Firefoxが43に更新されて以来、署名のないアドオンがデフォルトで無効化されたということであちこちから悲鳴が聞こえてくる昨今ですw

たとえば自分の観測した範囲では「ツリー型タブが無効になった」「AutoPagerizeが無効になった」とか叫んでるツイートをしばしば見かけるわけです。

で、次(Firefox44)からはFirefoxを捨ててChromeなどに移ると仰っている方が多いわけですが…。

駄菓子菓子、ちょっと待って! だいたいのアドオンはAMOに署名済みのものがあがってますから! AMO以外で落としてきたアドオンは、アドオンマネージャからの「更新を確認する」からではおそらく更新されないのでそこであきらめないでください。 今一度、AMOを訪れて自分が入れているアドオンの最新バージョンを確認してみてください。

Sign o' the times mess with your mind
Hurry before it's too late

ってことで手遅れになる前に、今一度、自分のアドオンをご確認くださいませ。