<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
-<html xmlns:v="urn:schemas-microsoft-com:vml">\r
- <head>\r
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
- <meta http-equiv="Content-Language" content="ja">\r
- <meta http-equiv="Content-Script-Type" content="text/javascript">\r
- <meta http-equiv="Content-Style-Type" content="text/css">\r
- <meta http-equiv="imagetoolbar" content="no">\r
- <title>pettanR</title>\r
- <link rel="stylesheet" type="text/css" href="common.css">\r
- </head>\r
- <body>\r
- <div id="general-content">\r
- <div id="outer-wrapper">\r
- \r
- <div id="header">\r
- <div class="base-content-width" style="position:relative;">\r
- <h1>pettanR</h1>\r
- <!-- global navi -->\r
- <div id="global-navi">\r
- <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
- </div>\r
- </div>\r
- </div>\r
- \r
- <div id="inner-wrapper" class="base-content-width">\r
- <div id="main">\r
-<img src="flip.svg">\r
+<html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
+<head>\r
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
+ <meta http-equiv="Content-Language" content="ja">\r
+ <meta http-equiv="Content-Script-Type" content="text/javascript">\r
+ <meta http-equiv="Content-Style-Type" content="text/css">\r
+ <meta http-equiv="imagetoolbar" content="no">\r
+ <link rel="stylesheet" type="text/css" href="../stylesheets/common.css">\r
+ <!-- InstanceBeginEditable name="doctitle" -->\r
+ <title>svg | pettanR</title>\r
+ <!-- InstanceEndEditable -->\r
+ <!-- InstanceBeginEditable name="head" -->\r
+ <!-- InstanceEndEditable -->\r
+</head>\r
\r
-<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
-<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
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">\r
-<image x="0" y="0" width="200" height="200" xlink:href="1.gif" transform="scale(-1,1) translate(-200,0)" />\r
-</svg>\r
+<body>\r
+ <div id="general-content">\r
+ <div id="outer-wrapper">\r
+ \r
+ <div id="header">\r
+ <div class="base-content-width" style="position:relative;">\r
+ <h1><a href="../index.html">pettanR</a></h1>\r
+ <!-- global navi -->\r
+ <div id="global-navi">\r
+ <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ \r
+ <div id="inner-wrapper" class="base-content-width">\r
+ <!-- InstanceBeginEditable name="main_content" -->\r
\r
+ <div id="main">\r
+ <h2>svg を使った画像の反転テスト</h2>\r
+ <div class="clearfix">\r
+ <img src="1.gif" class="float-left" width="200" height="200">\r
+ <p>svg を 使った画像の反転のためのテストページです．</p>\r
+ <p>css3 の transform をサポートしないが、svg をサポートするモダンブラウザに対して svg による反転画像機能を付与することを目指します．</p>\r
+ <p>この画像は元画像になります．</p>\r
</div>\r
- </div>\r
- </div>\r
- </div>\r
- \r
- <!-- footer -->\r
- <div id="footer-content">\r
- <div id="footer">\r
- <div id="footer-item-container" class="base-content-width clearfix">\r
- <div class="footer-item-wrapper">\r
- <div class="footer-item">\r
- <h2>ぺったんR にようこそ</h2>\r
- <ul>\r
- <li>サンプル</li>\r
- <li>ぺったんRの特徴</li>\r
- <li>沿革</li>\r
- </ul>\r
- </div>\r
+ <h3>firefox3.6 の svg サポートに関する注意</h3>\r
+ <p>3.5 から svg のサポートを開始した firefox ですが、3.6 までは javascript からの操作でしか svg を描画することができません．</p>\r
+ <p>そのため html文書中に svg タグを発見すると、それを読み込んで svg エレメントを生成し直すことで svg を描画する fix ライブラリも存在します．</p>\r
+ \r
+ <h2>img の src に flip.svg を指定</h2>\r
+ <div class="clearfix">\r
+ <img src="flip.svg" class="float-left">\r
+ <p>このようなかたちで別ファイルを用意することは、サーバ側でファイルデータを用意することになってしまうため早計です．</p>\r
+ <p>続いて、この .svg を データスキーム化することが本テストの狙いです．</p>\r
</div>\r
- <div class="footer-item-wrapper">\r
- <div class="footer-item">\r
- <h2>ドキュメント</h2>\r
- <ul>\r
- <li>作家向けドキュメント</li>\r
- <li>絵師向けドキュメント</li> \r
- <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
- <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
- </ul>\r
- </div>\r
+ <h3>source</h3>\r
+ <pre><code><img src="flip.svg"></code></pre>\r
+ <h4>flip.svg の 内容</h4>\r
+ <pre><code><?xml version="1.0"?>\r
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">\r
+ <image x="0" y="0" width="200" height="200" xlink:href="1.gif" transform="scale(-1,1) translate(-200,0)" />\r
+</svg></code></pre>\r
+ \r
+ <h2>img の src に flip.svg を data スキーム化したものを指定</h2>\r
+ <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
+ <h3>source</h3>\r
+ <pre><code><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"></code></pre>\r
+\r
+ <h2>js で data スキームを作成し img にセット</h2>\r
+ <div class="clearfix">\r
+ <img id="output" class="float-left">\r
+ <p>Opera9.6, 10.1, 10.5, 11.1, 11.5 で動作が確認できました．</p>\r
+ <p>画像の url は絶対指定にする必要があります．またローカルにファイル一式を置いた場合に、画像を表示させることができませんでした．</p>\r
+ </div>\r
+ <pre><code id="outputSrc"></code></pre>\r
+ \r
+ <h2>iframe 内に flip.svg を表示</h2>\r
+ <div class="clearfix">\r
+ <iframe src="flip.svg" width="200" height="200" class="float-left"></iframe>\r
+ <p>Opera9.6 で動作．firefox3.6でも表示されています．</p>\r
</div>\r
- <div class="footer-item-wrapper">\r
- <div class="footer-item">\r
- <h2>プロトタイプ</h2>\r
- <ul>\r
- <li>pettanr</li>\r
- <li><a href="work.html" rel="editor">js editor</a></li>\r
- </ul>\r
- <h2>Ajax contents</h2>\r
- <ul>\r
- <li><a href="help/jp.xml">help | jp</a></li>\r
- </ul>\r
- </div>\r
+ <h3>source</h3>\r
+ <pre><code><iframe src="flip.svg" width="200" height="200"></code></pre>\r
+ \r
+ <h2>iframe の src に flip.svg を data スキーム化したものを指定</h2>\r
+ <div class="clearfix">\r
+ <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
+ <p>さて、どうなるでしょう？？</p>\r
</div>\r
- <div class="footer-item-wrapper" style="width:170px;">\r
- <div class="footer-item" style="padding-right:0;">\r
- <h2>ぺったんRチーム</h2>\r
- <ul>\r
- <li>わたしたちについて</li>\r
- <li>ミッション</li>\r
- <li><a href="diary/itozyun.xml">itozyun's diary</a></li>\r
- <li>個人情報保護方針</li>\r
- <li>作品の取り扱い</li>\r
- <li>お問い合わせ</li>\r
- </ul>\r
- </div>\r
+ <h3>source</h3>\r
+ <pre><code><iframe width="200" height="200" 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"></code></pre> \r
+ \r
+ <h2>インラインSVG</h2>\r
+ <div class="clearfix">\r
+ <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
+ <image x="0" y="0" width="200" height="200" xlink:href="1.gif" transform="scale(-1,1) translate(-200,0)" />\r
+ </svg>\r
+ <p>インライン SVG をサポートするブラウザに対しては SVG な xml文書 を html 中に直接記述することができます．</p>\r
+ <p>仮にブラウザが css3 transform をサポートしていなくてもインラインSVG をサポートしていれば、とてもシンプルな記述で画像の反転は可能です．</p>\r
+ <p>しかし、インライン SVG は外部 SVG に比べてサポートが遅れたため、インライン SVG をサポートするブラウザの多くは css3 transform のサポートを済ませています．</p>\r
</div>\r
+ \r
+ <h3>source</h3>\r
+ <pre><code><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">\r
+ <image x="0" y="0" width="200" height="200" xlink:href="1.gif" transform="scale(-1,1) translate(-200,0)" />\r
+</svg></code></pre>\r
+ \r
</div>\r
- <div id="copyright">Copyright © 2011-2012 pettanR team, some rights reserved.</div>\r
- </div>\r
- </div>\r
+ <!-- InstanceEndEditable -->\r
+ </div>\r
+ </div>\r
+ </div>\r
+ \r
+ <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->\r
+\r
+ <div id="footer">\r
+ <div id="footer-item-container" class="base-content-width clearfix">\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>ぺったんR にようこそ</h2>\r
+ <ul>\r
+ <li>サンプル</li>\r
+ <li>ぺったんRの特徴</li>\r
+ <li>沿革</li>\r
+ </ul>\r
+ <h2>Test</h2>\r
+ <ul>\r
+ <li><a href="index.html">Test Index</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>ドキュメント</h2>\r
+ <ul>\r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
+ <li>絵師向けドキュメント</li> \r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>プロトタイプ</h2>\r
+ <ul>\r
+ <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
+ <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
+ </ul>\r
+ <h2>Ajax contents</h2>\r
+ <ul>\r
+ <li><a href="../help/jp.xml">help | jp</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper" style="width:170px;">\r
+ <div class="footer-item" style="padding-right:0;">\r
+ <h2>ぺったんRチーム</h2>\r
+ <ul>\r
+ <li>わたしたちについて</li>\r
+ <li>ミッション</li>\r
+ <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
+ <li>個人情報保護方針</li>\r
+ <li>作品の取り扱い</li>\r
+ <li>お問い合わせ</li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
+ </div><!-- #EndLibraryItem --></div>\r
+ <script type="text/javascript" src="../javascripts/common.js"></script>\r
+<!-- InstanceBeginEditable name="script" -->\r
<script type="text/javascript">\r
- function exportSVG(){\r
- var svgText = "\n";\r
- // 出力するXML（テキスト）SVG要素を追加する。 \r
- svgText += document.svgtext.value;\r
- //alert(svgText);\r
- // SVG-XMLを文字列化したものをdataスキームで生成 \r
- // エスケープ（UTF-16文字列はエスケープ解除） \r
- var data = "data:image/svg+xml;charset=UTF-8," + UnescapeUTF16Only(escape(svgText));\r
- // 別ウィンドウ（_blank）に出力 \r
- var svgWindow = window.open(data, "SVG", "_blank");\r
- }\r
- function UnescapeUTF16Only(s) {\r
- return s.replace(/%u\w\w\w\w/g, UnescapeUTF16);\r
+ function createSVG( _src){\r
+ var charset = ( document.charset || document.characterSet).toLowerCase();\r
+ var svgText = [\r
+ '<?xml version="1.0"?>',\r
+ '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">',\r
+ '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">',\r
+ '<image x="0" y="0" width="200" height="200" xlink:href="', _src, '" transform="scale(-1,1) translate(-200,0)" />',\r
+ '</svg>' ].join('');\r
+\r
+ var data = [ 'data:image/svg+xml;charset=', charset, ',', unescapeForData( svgText)].join( '');\r
+ \r
+ document.getElementById( 'output').src = data;\r
+ document.getElementById( 'outputSrc').innerHTML = [ '<img src="', data, '">'].join( '');\r
+ // return data;\r
}\r
- function UnescapeUTF16(s) {\r
- return unescape(s);\r
+ function unescapeForData( _data){\r
+ return _data.replace( / /g, '%20')\r
+ .replace( /"/g, '%22')\r
+ .replace( /,/g, '%2c')\r
+ .replace( /\//g, '%2f')\r
+ .replace( /:/g, '%3a')\r
+ .replace( /</g, '%3c')\r
+ .replace( /=/g, '%3d')\r
+ .replace( />/g, '%3e')\r
+ .replace( /\?/g, '%3f');\r
}\r
+ var _path = pettanr.util.getAbsolutePath( '1.gif');\r
+ createSVG( _path);\r
</script>\r
- </body>\r
-</html>\r
\r
+<!-- InstanceEndEditable -->\r
+</body>\r
+<!-- InstanceEnd --></html>\r
OSDN Git Service
