SVGをレスポンシブ化 - PHP,MySQL,Flex,JSな日々＋イラストとか

f:id:haru-komugi:20140722231034j:plain
SVGをレスポンシブ化させます。

サンプルはこちら
http://moeten.info/js/20140722_svgResponsive/
適当にウィンドウ幅を変えてみてください。

作り方

f:id:haru-komugi:20140722231216j:plain
SVGのレスポンシブ化は簡単で、SVG画像を作成する際、イラストレーターでレイヤーの名前にIDを指定します。
そして、HTML側のスタイルシートでレスポンシブの設定をします。

ソースコードはこちら

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript">

    //
    $(function(){
      $("#mySvg").load("abc.svg");
    });

  </script>
  <style type="text/css">
    #mySvg text{
      fill: blue;
    }
    @media screen and (min-width : 768px){
      #mySvg text{
        fill: red;
      }
    }
    @media screen and (min-width : 1024px) {
      #mySvg text{
        fill: yellow;
      }
    }
  </style>
</head>
<body>
<div id="mySvg"></div>
</body>
</html>