svgでサイズ可変な枠線を生成する

この前作ったサイズ不定の矢印を作った時のテクニックを応用して今度はサイズ可変な枠線を自動生成するsvgを作ってみた．通常svgはサイズを固定したほうが作りやすいけれど，可変サイズのグラフィックを作り置きしておくと何かと便利かも知れない．

→これってborder-imageの再実装じゃね？...orz...

こちらをクリックして，ブラウザの大きさを変えてみよう．

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <desc>フレーム生成フレームワーク</desc>
 <!--
  フレーム定義
  20px×20pxで図形を設定して下さい．
 -->
 <defs>
  <g id="corner">
   <g mask="url(#cornerMask)">
    <circle cx="20" cy="20" r="10" stroke-width="10" stroke="orange" fill="none"/>
    <circle cx="20" cy="20" r="10" stroke-width="6" stroke="red" fill="none"/>
   </g>
  </g>
  <g id="side">
   <line x1="0" y1="10" x2="20" y2="10" stroke-width="10" stroke="orange" fill="none"/>
   <line x1="0" y1="10" x2="20" y2="10" stroke-width="6" stroke="red" fill="none"/>
  </g>
 </defs>
 
 <!--以下フレーム生成プログラム-->
 <defs>
  <!--side patterns-->
  <pattern id="patternH" patternUnits="userSpaceOnUse" width="20" height="20">
   <use xlink:href="#side"/>
  </pattern>
  <pattern id="patternV" patternUnits="userSpaceOnUse" width="20" height="20" 
   patternTransform="translate(-20,0),rotate(90),scale(1,-1)">
   <use xlink:href="#side"/>
  </pattern>
  <!--四隅のマスク-->
  <rect id="cornerRange" x="0" y="0" width="20" height="20"/>
  <mask id="cornerMask" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
   <use xlink:href="#cornerRange" fill="white"/>
  </mask>
  <!--辺グラフィックから四隅を隠すマスク-->
  <mask id="cornersMask" maskUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
   <rect width="100%" height="100%" fill="white"/>
   <use xlink:href="#cornerRange"/>
   <svg x="100%" overflow="visible">
    <use xlink:href="#cornerRange" transform="scale(-1,1)"/>
   </svg>
   <svg x="100%" y="100%" overflow="visible">
    <use xlink:href="#cornerRange" transform="scale(-1,-1)"/>
   </svg>
   <svg y="100%" overflow="visible">
    <use xlink:href="#cornerRange" transform="scale(1,-1)"/>
   </svg>
  </mask>
 </defs>

 <!--四隅-->
 <g id="corners">
  <use xlink:href="#corner"/>
  <svg x="100%" overflow="visible">
   <use xlink:href="#corner" transform="scale(-1,1)"/>
  </svg>
  <svg x="100%" y="100%" overflow="visible">
   <use xlink:href="#corner" transform="scale(-1,-1)"/>
  </svg>
  <svg y="100%" overflow="visible">
   <use xlink:href="#corner" transform="scale(1,-1)"/>
  </svg>
 </g>

 <!--四辺-->
 <g id="sides" mask="url(#cornersMask)">
  <rect width="100%" height="20" fill="url(#patternH)"/>
  <rect width="20" height="100%" fill="url(#patternV)"/>
  <svg y="100%" overflow="visible">
   <rect width="100%" height="20" fill="url(#patternH)" transform="scale(1,-1)"/>
  </svg>
  <svg x="100%" overflow="visible">
   <rect width="20" height="100%" fill="url(#patternV)" transform="scale(-1,1)"/>
  </svg>
 </g>
</svg>

基本となる図形を一ヵ所で設定しているので， 内容を書き換えれば様々なフレームを作り出すことができるはずだ．

但しこれはsvgを手作りしているからできる芸当であって，ドローイングツールを使って編集することはできないと思う．基本となるグラフィックは別に作って手作業で埋め込むか，use要素やimage要素を使って外部参照すると良いかもしれない．（ただし外部参照する場合は，htmlでこのsvgを使う場合に使える要素がobject要素に狭まってしまう点に注意．）

---

border-imageっぽい動作だけれど，工夫次第でより柔軟な枠線が作れるので，いろいろ研究してみるのもいいかも知れない．