0.4.x/test/svg.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
   2 <html><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
   3 <head>\r
   4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   6         <meta http-equiv="Content-Language" content="ja">\r
   7         <meta http-equiv="Content-Script-Type" content="text/javascript">\r
   8         <meta http-equiv="Content-Style-Type" content="text/css">\r
   9         <meta http-equiv="imagetoolbar" content="no">\r
  10         <link rel="stylesheet" type="text/css" href="../stylesheets/common.css">\r
  11         <!-- InstanceBeginEditable name="doctitle" -->\r
  12         <title>svg | pettanR</title>\r
  13         <!-- InstanceEndEditable -->\r
  14         <!-- InstanceBeginEditable name="head" -->\r
  15         <!-- InstanceEndEditable -->\r
  16 </head>\r
  17 \r
  18 <body>\r
  19         <!--[if lt IE 9]>\r
  20                 <script type="text/javascript">\r
  21                                 (function(){\r
  22                                         var     b = document.body || (function(){document.write('&lt;body&gt;');return document.body;})(),\r
  23                                                 c = b.className || '',\r
  24                                                 x = document.createElement('div');\r
  25                                         b.appendChild(x);\r
  26                                         x.style.cssText = 'width:1px;height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';\r
  27                                         b.className += [ c !== '' ? ' ' : c, 'pettanr-ActiveX-', x.offsetHeight > 1 ? 'enabled' : 'disabled'].join( '');\r
  28                                         b.removeChild(x);\r
  29                                 })();\r
  30                 </script>\r
  31         <![endif]-->\r
  32 \r
  33     <div id="general-content">\r
  34         <div id="outer-wrapper">\r
  35             \r
  36             <div id="header">\r
  37                 <div class="base-content-width" style="position:relative;">\r
  38                     <h1><a href="../index.html">pettanR</a></h1>\r
  39                 <!-- global navi -->\r
  40                     <div id="global-navi">\r
  41                         <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
  42                     </div>\r
  43                 </div>\r
  44             </div>\r
  45             \r
  46             <div id="inner-wrapper" class="base-content-width">\r
  47                                 <!-- InstanceBeginEditable name="main_content" -->\r
  48 \r
  49                                 <div id="main">\r
  50                                         <h2>svg を使った画像の反転テスト</h2>\r
  51                                         <div class="clearfix">\r
  52                                                 <img src="1.gif" class="float-left" width="200" height="200">\r
  53                                                 <p>svg を 使った画像の反転のためのテストページです．</p>\r
  54                                                 <p>css3 の transform をサポートしないが、svg をサポートするモダンブラウザに対して svg による反転画像機能を付与することを目指します．</p>\r
  55                                                 <p>この画像は元画像になります．</p>\r
  56                                         </div>\r
  57                                         <h3>firefox3.6 の svg サポートに関する注意</h3>\r
  58                                         <p>3.5 から svg のサポートを開始した firefox ですが、3.6 までは javascript からの操作でしか svg を描画することができません．</p>\r
  59                                         <p>そのため html文書中に svg タグを発見すると、それを読み込んで svg エレメントを生成し直すことで svg を描画する fix ライブラリも存在します．</p>\r
  60                                 \r
  61                                         <h2>img の src に flip.svg を指定</h2>\r
  62                                         <div class="clearfix">\r
  63                                                 <img src="flip.svg" class="float-left">\r
  64                                                 <p>このようなかたちで別ファイルを用意することは、サーバ側でファイルデータを用意することになってしまうため早計です．</p>\r
  65                                                 <p>続いて、この .svg を データスキーム化することが本テストの狙いです．</p>\r
  66                                         </div>\r
  67                                         <h3>source</h3>\r
  68                                         <pre><code>&lt;img src=&quot;flip.svg&quot;&gt;</code></pre>\r
  69                                         <h4>flip.svg の 内容</h4>\r
  70                                         <pre><code>&lt;?xml version=&quot;1.0&quot;?&gt;\r
  71 &lt;!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;&gt;\r
  72 &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;\r
  73 &nbsp;&nbsp;&lt;image x=&quot;0&quot; y=&quot;0&quot; width=&quot;200&quot; height=&quot;200&quot; xlink:href=&quot;1.gif&quot; transform=&quot;scale(-1,1) translate(-200,0)&quot; /&gt;\r
  74 &lt;/svg&gt;</code></pre>\r
  75                                         \r
  76                                         <h2>img の src に flip.svg を data スキーム化したものを指定</h2>\r
  77                                         <img src="data:image/svg+xml;charset=utf-8,%3c%3fxml%20version%3d%221.0%22%3f%3e%3c!DOCTYPE%20svg%20PUBLIC%20%22-%2f%2fW3C%2f%2fDTD%20SVG%201.1%2f%2fEN%22%20%22http%3a%2f%2fwww.w3.org%2fGraphics%2fSVG%2f1.1%2fDTD%2fsvg11.dtd%22%3e%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20version%3d%221.1%22%20xmlns%3axlink%3d%22http%3a%2f%2fwww.w3.org%2f1999%2fxlink%22%20width%3d%22200%22%20height%3d%22200%22%3e%3cimage%20x%3d%220%22%20y%3d%220%22%20width%3d%22200%22%20height%3d%22200%22%20xlink%3ahref%3d%22http%3a%2f%2fstatic.sourceforge.jp%2fthumb%2fg%2f2%2f930%2f640x640_0.png%22%20transform%3d%22scale(-1%2c1)%20translate(-200%2c0)%22%20%2f%3e%3c%2fsvg%3e">\r
  78                                         <h3>source</h3>\r
  79                                         <pre><code>&lt;img src=&quot;data:image/svg+xml;charset=utf-8,%3c%3fxml%20version%3d%221.0%22%3f%3e%3c!DOCTYPE%20svg%20PUBLIC%20%22-%2f%2fW3C%2f%2fDTD%20SVG%201.1%2f%2fEN%22%20%22http%3a%2f%2fwww.w3.org%2fGraphics%2fSVG%2f1.1%2fDTD%2fsvg11.dtd%22%3e%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20version%3d%221.1%22%20xmlns%3axlink%3d%22http%3a%2f%2fwww.w3.org%2f1999%2fxlink%22%20width%3d%22200%22%20height%3d%22200%22%3e%3cimage%20x%3d%220%22%20y%3d%220%22%20width%3d%22200%22%20height%3d%22200%22%20xlink%3ahref%3d%22http%3a%2f%2fstatic.sourceforge.jp%2fthumb%2fg%2f2%2f930%2f640x640_0.png%22%20transform%3d%22scale(-1%2c1)%20translate(-200%2c0)%22%20%2f%3e%3c%2fsvg%3e&quot;&gt;</code></pre>\r
  80 \r
  81                                         <h2>js で data スキームを作成し img にセット</h2>\r
  82                                         <div class="clearfix">\r
  83                                                 <img id="output" class="float-left">\r
  84                                                 <p>Opera9.6, 10.1, 10.5, 11.1, 11.5 で動作が確認できました．</p>\r
  85                                                 <p>画像の url は絶対指定にする必要があります．またローカルにファイル一式を置いた場合に、画像を表示させることができませんでした．</p>\r
  86                                         </div>\r
  87                                         <pre><code id="outputSrc"></code></pre>\r
  88                                         \r
  89                                         <h2>iframe 内に flip.svg を表示</h2>\r
  90                                         <div class="clearfix">\r
  91                                                 <iframe src="flip.svg" width="200" height="200" class="float-left"></iframe>\r
  92                                                 <p>Opera9.6 で動作．firefox3.6でも表示されています．</p>\r
  93                                         </div>\r
  94                                         <h3>source</h3>\r
  95                                         <pre><code>&lt;iframe src=&quot;flip.svg&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</code></pre>\r
  96                                         \r
  97                                         <h2>iframe の src に flip.svg を data スキーム化したものを指定</h2>\r
  98                                         <div class="clearfix">\r
  99                                                 <iframe width="200" height="200" class="float-left" src="data:image/svg+xml;charset=utf-8,%3c%3fxml%20version%3d%221.0%22%3f%3e%3c!DOCTYPE%20svg%20PUBLIC%20%22-%2f%2fW3C%2f%2fDTD%20SVG%201.1%2f%2fEN%22%20%22http%3a%2f%2fwww.w3.org%2fGraphics%2fSVG%2f1.1%2fDTD%2fsvg11.dtd%22%3e%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20version%3d%221.1%22%20xmlns%3axlink%3d%22http%3a%2f%2fwww.w3.org%2f1999%2fxlink%22%20width%3d%22200%22%20height%3d%22200%22%3e%3cimage%20x%3d%220%22%20y%3d%220%22%20width%3d%22200%22%20height%3d%22200%22%20xlink%3ahref%3d%22http%3a%2f%2fstatic.sourceforge.jp%2fthumb%2fg%2f2%2f930%2f640x640_0.png%22%20transform%3d%22scale(-1%2c1)%20translate(-200%2c0)%22%20%2f%3e%3c%2fsvg%3e"></iframe>\r
 100                                                 <p>さて、どうなるでしょう？？</p>\r
 101                                         </div>\r
 102                                         <h3>source</h3>\r
 103                                         <pre><code>&lt;iframe width=&quot;200&quot; height=&quot;200&quot; src=&quot;data:image/svg+xml;charset=utf-8,%3c%3fxml%20version%3d%221.0%22%3f%3e%3c!DOCTYPE%20svg%20PUBLIC%20%22-%2f%2fW3C%2f%2fDTD%20SVG%201.1%2f%2fEN%22%20%22http%3a%2f%2fwww.w3.org%2fGraphics%2fSVG%2f1.1%2fDTD%2fsvg11.dtd%22%3e%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20version%3d%221.1%22%20xmlns%3axlink%3d%22http%3a%2f%2fwww.w3.org%2f1999%2fxlink%22%20width%3d%22200%22%20height%3d%22200%22%3e%3cimage%20x%3d%220%22%20y%3d%220%22%20width%3d%22200%22%20height%3d%22200%22%20xlink%3ahref%3d%22http%3a%2f%2fstatic.sourceforge.jp%2fthumb%2fg%2f2%2f930%2f640x640_0.png%22%20transform%3d%22scale(-1%2c1)%20translate(-200%2c0)%22%20%2f%3e%3c%2fsvg%3e&quot;&gt;</code></pre>                                  \r
 104                                         \r
 105                                         <h2>インラインSVG</h2>\r
 106                                         <div class="clearfix">\r
 107                                                 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="float-left">\r
 108                                                         <image x="0" y="0" width="200" height="200" xlink:href="1.gif" transform="scale(-1,1) translate(-200,0)" />\r
 109                                                 </svg>\r
 110                                                 <p>インライン SVG をサポートするブラウザに対しては SVG な xml文書 を html 中に直接記述することができます．</p>\r
 111                                                 <p>仮にブラウザが css3 transform をサポートしていなくてもインラインSVG をサポートしていれば、とてもシンプルな記述で画像の反転は可能です．</p>\r
 112                                                 <p>しかし、インライン SVG は外部 SVG に比べてサポートが遅れたため、インライン SVG をサポートするブラウザの多くは css3 transform のサポートを済ませています．</p>\r
 113                                         </div>\r
 114                                         \r
 115                                         <h3>source</h3>\r
 116                                         <pre><code>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;\r
 117 &nbsp;&nbsp;&lt;image x=&quot;0&quot; y=&quot;0&quot; width=&quot;200&quot; height=&quot;200&quot; xlink:href=&quot;1.gif&quot; transform=&quot;scale(-1,1) translate(-200,0)&quot; /&gt;\r
 118 &lt;/svg&gt;</code></pre>\r
 119                                         \r
 120                                 </div>\r
 121                                 <!-- InstanceEndEditable -->\r
 122             </div>\r
 123         </div>\r
 124     </div>\r
 125     \r
 126     <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->\r
 127 \r
 128         <div id="footer">\r
 129             <div id="footer-item-container" class="base-content-width clearfix">\r
 130                 <div class="footer-item-wrapper">\r
 131                     <div class="footer-item">\r
 132                         <h2>ぺったんR にようこそ</h2>\r
 133                         <ul>\r
 134                             <li>サンプル</li>\r
 135                             <li>ぺったんRの特徴</li>\r
 136                             <li>沿革</li>\r
 137                         </ul>\r
 138                         <h2>Test</h2>\r
 139                         <ul>\r
 140                             <li><a href="index.html">Test Index</a></li>\r
 141                         </ul>\r
 142                     </div>\r
 143                 </div>\r
 144                 <div class="footer-item-wrapper">\r
 145                     <div class="footer-item">\r
 146                         <h2>ドキュメント</h2>\r
 147                         <ul>\r
 148                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
 149                             <li>絵師向けドキュメント</li>                                                     \r
 150                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
 151                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
 152                         </ul>\r
 153                     </div>\r
 154                 </div>\r
 155                 <div class="footer-item-wrapper">\r
 156                     <div class="footer-item">\r
 157                         <h2>プロトタイプ</h2>\r
 158                         <ul>\r
 159                             <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
 160                             <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
 161                         </ul>\r
 162                         <h2>Ajax contents</h2>\r
 163                         <ul>\r
 164                             <li><a href="../help/jp.xml">help | jp</a></li>\r
 165                         </ul>\r
 166                     </div>\r
 167                 </div>\r
 168                 <div class="footer-item-wrapper" style="width:170px;">\r
 169                     <div class="footer-item" style="padding-right:0;">\r
 170                         <h2>ぺったんRチーム</h2>\r
 171                         <ul>\r
 172                             <li>わたしたちについて</li>\r
 173                             <li>ミッション</li>\r
 174                             <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
 175                             <li>個人情報保護方針</li>\r
 176                             <li>作品の取り扱い</li>\r
 177                             <li>お問い合わせ</li>\r
 178                         </ul>\r
 179                     </div>\r
 180                 </div>\r
 181             </div>\r
 182             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
 183         </div><!-- #EndLibraryItem --></div>\r
 184         <script type="text/javascript" src="../javascripts/common.js"></script>\r
 185 <!-- InstanceBeginEditable name="script" -->\r
 186                 <script type="text/javascript">\r
 187                         function createSVG( _src){\r
 188                                 var charset = ( document.charset || document.characterSet).toLowerCase();\r
 189                                 var svgText = [\r
 190                                         '<?xml version="1.0"?>',\r
 191                                         '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">',\r
 192                                         '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">',\r
 193                                         '<image x="0" y="0" width="200" height="200" xlink:href="', _src, '" transform="scale(-1,1) translate(-200,0)" />',\r
 194                                         '</svg>' ].join('');\r
 195 \r
 196                                 var data = [ 'data:image/svg+xml;charset=', charset, ',', unescapeForData( svgText)].join( '');\r
 197                                 \r
 198                                 document.getElementById( 'output').src = data;\r
 199                                 document.getElementById( 'outputSrc').innerHTML = [ '&lt;img src="', data, '"&gt;'].join( '');\r
 200                                 // return data;\r
 201                         }\r
 202                         function unescapeForData( _data){\r
 203                                 return _data.replace( / /g, '%20')\r
 204                                                         .replace( /"/g, '%22')\r
 205                                                         .replace( /,/g, '%2c')\r
 206                                                         .replace( /\//g, '%2f')\r
 207                                                         .replace( /:/g, '%3a')\r
 208                                                         .replace( /</g, '%3c')\r
 209                                                         .replace( /=/g, '%3d')\r
 210                                                         .replace( />/g, '%3e')\r
 211                                                         .replace( /\?/g, '%3f');\r
 212                         }\r
 213                         var _path = pettanr.util.getAbsolutePath( '1.gif');\r
 214                         createSVG( _path);\r
 215                 </script>\r
 216 \r
 217 <!-- InstanceEndEditable -->\r
 218 </body>\r
 219 <!-- InstanceEnd --></html>\r