豚吐露＠wiki

網掛けにしたい

最終更新：2023年02月24日 09:38

Bot(ページ名リンク)

- view

管理者のみ編集可

網掛けにしたい

Windows 7 Professional
InternetExplorer 10

SVG objectに網掛けを設定したい場合は、自分で編みかけのパターンを作ってやってobjectのfillに設定してやれば良い。

今回はpathに網掛けしてみる。
Pathに貼り付けたのは、以下の画像。

※拡大されてるんで、ぼっけぼけですが...

sampleでは、八角形の方をclickすると網掛けが交互に変わる。
c.f.)

網掛け.zip

e.g.) 網掛けSVG

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" style="width:300px;height:300px;">
      <path id="Polygon1"
        fill="url(#dot)"
        fill-opacity="0.4"
        stroke="#000000"
        stroke-width="5"
        d="M50,50 L250,50 L250,180 L50,180 L50,50 Z" />
      <path id="Polygon2"
        fill="url(#str)"
        fill-opacity="0.4"
        stroke="#000000"
        stroke-width="5"
        d="M100,100 L150,100 L190,140 L190,190 L150,230 L100,230 L60,190 L60,140 L100,100 Z" />
    </svg>
 
    <svg xmlns="http://www.w3.org/2000/svg" style="width:0px;height:0px;">
      <defs>
        <pattern id="str" patternUnits="userSpaceOnUse" width="10" height="10">
          <image xlink:href="stripe.png" width="10" height="10" />
        </pattern>
        <pattern id="dot" patternUnits="userSpaceOnUse" width="4" height="4">
          <image xlink:href="dot.png" width="2" height="2" />
        </pattern>
      </defs>
    </svg>
  </div>
 
  <script type="text/javascript">
  $("path#Polygon2").click(function(){
    if(0 <= $("path#Polygon2").attr("fill").search("str")){
      $("path#Polygon2").attr("fill", "url(#dot)");
    }else{
      $("path#Polygon2").attr("fill", "url(#str)");
    }
  });
  </script>
</body>

ポイントは、24～31行目。ここのpatternでPathに貼り付ける画像を設定。画像は左上から並べられるので、パターン化しとけばdot柄や、stripe柄が作れる。
また、25～26行目のように、元の画像を引き伸ばして並べたり、28～29行目のように、わざっと配置する場所を画像より大きくして、dot柄の間隔広げたりとかできる。

で、この作ったパターンをfillに設定する。10行目と16行目がそれ。

35行目からのJavaScriptは、Pathをclickするたんびにドット柄とスプライト柄の模様を変えてるだけ。

更新日： 2023年02月24日 (金) 09時38分58秒