1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
\r
2 <html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->
\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/site.css">
\r
11 <link rel="stylesheet" type="text/css" href="../stylesheets/peta.common.css">
\r
12 <link rel="stylesheet" type="text/css" href="../stylesheets/system.css">
\r
13 <!-- InstanceBeginEditable name="doctitle" -->
\r
14 <title>svg | pettanR</title>
\r
15 <!-- InstanceEndEditable -->
\r
16 <!-- InstanceBeginEditable name="head" -->
\r
17 <!-- InstanceEndEditable -->
\r
21 <div id="general-content">
\r
22 <div id="outer-wrapper">
\r
25 <div class="base-content-width" style="position:relative;">
\r
26 <h1><a href="../index.html">pettanR</a></h1>
\r
27 <!-- global navi -->
\r
28 <div id="global-navi">
\r
29 <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>
\r
34 <div id="inner-wrapper" class="base-content-width">
\r
35 <!-- InstanceBeginEditable name="main_content" -->
\r
38 <div id="breadcrumb"><a href="index.html">テスト インデックス</a> > svg を使った画像の反転テスト</div>
\r
39 <h2>svg を使った画像の反転テスト</h2>
\r
40 <div class="clearfix">
\r
41 <img src="1.gif" class="float-left" width="200" height="200">
\r
42 <p>svg を 使った画像の反転のためのテストページです.</p>
\r
43 <p>css3 の transform をサポートしないが、svg をサポートするモダンブラウザに対して svg による反転画像機能を付与することを目指します.</p>
\r
44 <p>この画像は元画像になります.</p>
\r
46 <h3>firefox3.6 の svg サポートに関する注意</h3>
\r
47 <p>3.5 から svg のサポートを開始した firefox ですが、3.6 までは javascript からの操作でしか svg を描画することができません.</p>
\r
48 <p>そのため html文書中に svg タグを発見すると、それを読み込んで svg エレメントを生成し直すことで svg を描画する fix ライブラリも存在します.</p>
\r
50 <h2>img の src に flip.svg を指定</h2>
\r
51 <div class="clearfix">
\r
52 <img src="flip.svg" class="float-left">
\r
53 <p>このようなかたちで別ファイルを用意することは、サーバ側でファイルデータを用意することになってしまうため早計です.</p>
\r
54 <p>続いて、この .svg を データスキーム化することが本テストの狙いです.</p>
\r
57 <pre><code><img src="flip.svg"></code></pre>
\r
58 <h4>flip.svg の 内容</h4>
\r
59 <pre><code><?xml version="1.0"?>
\r
60 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
\r
61 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
\r
62 <image x="0" y="0" width="200" height="200" xlink:href="1.gif" transform="scale(-1,1) translate(-200,0)" />
\r
63 </svg></code></pre>
\r
65 <h2>img の src に flip.svg を data スキーム化したものを指定</h2>
\r
66 <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
68 <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
70 <h2>js で data スキームを作成し img にセット</h2>
\r
71 <div class="clearfix">
\r
72 <img id="output" class="float-left">
\r
73 <p>Opera9.6, 10.1, 10.5, 11.1, 11.5 で動作が確認できました.</p>
\r
74 <p>画像の url は絶対指定にする必要があります.またローカルにファイル一式を置いた場合に、画像を表示させることができませんでした.</p>
\r
76 <pre><code id="outputSrc"></code></pre>
\r
78 <h2>iframe 内に flip.svg を表示</h2>
\r
79 <div class="clearfix">
\r
80 <iframe src="flip.svg" width="200" height="200" class="float-left"></iframe>
\r
81 <p>Opera9.6 で動作.firefox3.6でも表示されています.</p>
\r
84 <pre><code><iframe src="flip.svg" width="200" height="200"></code></pre>
\r
86 <h2>iframe の src に flip.svg を data スキーム化したものを指定</h2>
\r
87 <div class="clearfix">
\r
88 <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
89 <p>さて、どうなるでしょう??</p>
\r
92 <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
95 <div class="clearfix">
\r
96 <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
97 <image x="0" y="0" width="200" height="200" xlink:href="1.gif" transform="scale(-1,1) translate(-200,0)" />
\r
99 <p>インライン SVG をサポートするブラウザに対しては SVG な xml文書 を html 中に直接記述することができます.</p>
\r
100 <p>仮にブラウザが css3 transform をサポートしていなくてもインラインSVG をサポートしていれば、とてもシンプルな記述で画像の反転は可能です.</p>
\r
101 <p>しかし、インライン SVG は外部 SVG に比べてサポートが遅れたため、インライン SVG をサポートするブラウザの多くは css3 transform のサポートを済ませています.</p>
\r
105 <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
106 <image x="0" y="0" width="200" height="200" xlink:href="1.gif" transform="scale(-1,1) translate(-200,0)" />
\r
107 </svg></code></pre>
\r
110 <!-- InstanceEndEditable -->
\r
115 <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->
\r
118 <div id="footer-item-container" class="base-content-width clearfix">
\r
119 <div class="footer-item-wrapper">
\r
120 <div class="footer-item">
\r
121 <h2>ぺったんR にようこそ</h2>
\r
129 <li><a href="index.html">Test Index</a></li>
\r
133 <div class="footer-item-wrapper">
\r
134 <div class="footer-item">
\r
137 <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>
\r
138 <li>絵師向けドキュメント</li>
\r
139 <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>
\r
140 <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>
\r
144 <div class="footer-item-wrapper">
\r
145 <div class="footer-item">
\r
148 <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>
\r
149 <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>
\r
151 <h2>Ajax contents</h2>
\r
153 <li><a href="../help/jp.xml">help | jp</a></li>
\r
157 <div class="footer-item-wrapper" style="width:170px;">
\r
158 <div class="footer-item" style="padding-right:0;">
\r
163 <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>
\r
171 <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
\r
172 </div><!-- #EndLibraryItem -->
\r
174 <script type="text/javascript">
\r
175 var has_server_support = false;
\r
177 <!-- InstanceBeginEditable name="script" -->
\r
178 <script type="text/javascript" src="../javascripts/system.js"></script>
\r
179 <script type="text/javascript">
\r
180 function createSVG( _src){
\r
181 var charset = ( document.charset || document.characterSet).toLowerCase();
\r
183 '<?xml version="1.0"?>',
\r
184 '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">',
\r
185 '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">',
\r
186 '<image x="0" y="0" width="200" height="200" xlink:href="', _src, '" transform="scale(-1,1) translate(-200,0)" />',
\r
187 '</svg>' ].join('');
\r
189 var data = [ 'data:image/svg+xml;charset=', charset, ',', unescapeForData( svgText)].join( '');
\r
191 document.getElementById( 'output').src = data;
\r
192 document.getElementById( 'outputSrc').innerHTML = [ '<img src="', data, '">'].join( '');
\r
195 function unescapeForData( _data){
\r
196 return _data.replace( / /g, '%20')
\r
197 .replace( /"/g, '%22')
\r
198 .replace( /,/g, '%2c')
\r
199 .replace( /\//g, '%2f')
\r
200 .replace( /:/g, '%3a')
\r
201 .replace( /</g, '%3c')
\r
202 .replace( /=/g, '%3d')
\r
203 .replace( />/g, '%3e')
\r
204 .replace( /\?/g, '%3f');
\r
206 var _path = Util.getAbsolutePath( '1.gif' );
\r
210 <!-- InstanceEndEditable -->
\r
212 <!-- InstanceEnd --></html>
\r