WordPressテンプレート制作、ウェブデザイン技能検定に挑戦中

前の記事:ロゴデザインを一新 擬似要素の画像サイズを変更する方法
HOME
次の記事:GoogleAdSense レスポンシブ広告が親ボックスを突き抜けて画面横幅いっぱいに表示されてしまう

SVG クリッピングとマスクの使い方 キラキラのパスの打ち方

Web知識

ベクター画像を扱えるペイントツールではコードを意識する事なく目的のSVGを作成出来ますが、コードを理解すればCSSやJavaScriptで自在に操作可能となるのでWebデザインの幅を広げる事が出来ます。

※サンプルコードをコピペで流用する場合はコメント部分<!– –>を削除してください

クリッピング

切り抜きを適用する画像

夜桜

SVGコード

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" width="320" height="180" viewBox="0 0 320 180" style="border: solid 1px #000000;">
 <defs><!-- 参照用の要素を定義 -->
  <clipPath id="clip"><!-- 表示したい図形やテキストを定義 -->
   <text font-family="MS PGothic" font-size="100" x="40" y="120">TEST</text>
  </clipPath>
 </defs>
 <image xlink:href="image.jpg" width="320" height="180" clip-path="url(#clip)" />
</svg>

結果

画像をTESTの文字で切り抜き

マスク

マスク定義された要素は、色の濃淡によって要素の透過度を決定します。白の場合は表示、黒の場合は非表示。中間色であれば半透明になります。

SVGコード

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="180" viewBox="0 0 320 180" style="background-color: #cccccc;">
 <defs><!-- 参照用の要素を定義 -->
  <mask id="mask">
   <rect x="60" y="20" width="200" height="140" fill="#ffffff" /><!-- 長方形 白塗り※表示 -->
   <circle cx="120" cy="70" r="10" fill="#000000" /><!-- 円 黒塗り※非表示 -->
   <circle cx="200" cy="70" r="10" fill="#000000" /><!-- 円 黒塗り※非表示 -->
   <path d="M 160 100 L 175 120 L 145 120 Z" fill="#000000" /><!-- 逆三角形 黒塗り※非表示 -->
  </mask>
 </defs>
 <rect x="0" y="0" width="320" height="180" fill="#734229" mask="url(#mask)" /><!-- マスク定義した図形を茶色で描画 -->
</svg>

結果

ダンボー的な図形

キラキラのパス

タネが分かってしまえば難しい話ではありませんが、検索してもサンプルコードが見つからずハマッてしまったので一応書き留めておきます。

SVGコード

<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140" style="border: solid 1px #000000;">
 <path d="M 70 10 Q 70 70 130 70 Q 70 70 70 130 Q 70 70 10 70 Q 70 70 70 10 Z" fill="#ffd700" /><!-- M(始点) Q(二次ベジェ曲線: 第1引数に中心点、第2引数にパスを打つ位置を指定) Z(パスを閉じる) -->
</svg>

結果

キラキラ

サンプルSVG

現在このブログで使用しているロゴのSVGコードです。

SVGコード

<svg xmlns="http://www.w3.org/2000/svg" width="380" height="380" viewBox="0 0 380 380">
 <defs>
  <mask id="mask1"><!-- カード外側 -->
   <rect x="70" y="70" width="240" height="300" stroke="#ffffff" stroke-width="2" />
   <rect x="0" y="0" width="135" height="135" fill="#000000" />
  </mask>
  <mask id="mask2"><!-- カード内側 -->
   <rect x="90" y="90" width="200" height="260" fill="#ffffff" />
   <text x="120" y="292" font-family="MS PGothic" font-weight="bold" font-size="200" fill="#000000">R</text>
   <circle cx="70" cy="70" r="60" fill="#000000" />
  </mask>
 </defs>
 <g fill="#000000" stroke="#000000" stroke-width="2"><!-- グループ化 -->
  <rect x="0" y="0" width="380" height="380" stroke="none" mask="url(#mask1)" />
  <rect x="0" y="0" width="380" height="380" stroke="none" mask="url(#mask2)" />
  <circle cx="70" cy="70" r="40" fill="none" />
  <circle cx="70" cy="70" r="50" fill="none" />
  <path d="M 70 10 Q 70 70 130 70 Q 70 70 70 130 Q 70 70 10 70 Q 70 70 70 10 Z" />
 </g>
</svg>

結果

レアカードロゴ

SVG クリッピングとマスクの使い方 キラキラのパスの打ち方

0件のコメント

コメント

カテゴリ

月別アーカイブ