hirokonaBlog

ググる→忘れそう→即時メモ 京都のWebデザイナーの備忘録

svg

svgのサイズの指定的なナニ。preserveAspectRatioについて

全体をカバーするためにnoneにしてたら縦長になってた

none:指定のサイズで表示される(imgタグにwitdth height入れたのと同じような感じ)
meet:アスペクト比を維持してちょうど全体が見える
slice:アスペクト比を維持して余白無くすっぽりカバーされる(見えない部分がある)

ゲームミュージックと生存確認をかねた画期的な: svgのpreserveAspectRatio属性の動作検証
http://defghi1977-onblog.blogspot.jp/2012/12/svgpreserveaspectratio.html

svgで描画した円をズームする

htmlにうめこんどく

    <svg id="circle1" data-r-hover="0" viewBox="0 0 320 180" preserveAspectRatio="slice">
        <circle cx="160" cy="90" r="320"/>
    </svg>

jsはsnap.jsつかってる。こんなの。

    t.svg1 = Snap('#circle1'),
    t.svg1.circle = t.svg1.select('circle'),
    t.svg1.moveFrom = t.svg1.circle.attr('r'),
    t.svg1.moveTo = t.svg1.attr('data-r-hover');

    t.svg1.circle.animate({ 'r' : t.svg1.moveTo }, t.loading.speed, t.loading.easing);

投稿日

カテゴリー:

投稿者:

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください