SVGを埋め込めない
AllowFullAccessをYesにしてあるからプラグインやスクリプトを読み込めないとかではないと思うんだけどなぁ。ヘルプビューアにドロップしても動くからKSVGはWebKit自体に含まれている筈。Web Clipにもなるのに。
XHTMLに埋め込むとDefault.pngのまま描画されない。embedやobjectで参照手段は問わず埋め込もうとするとscriptやstyleの中身が丸見え、要するに知らないXMLを読んだ時の挙動になる。
バッドノウハウ
setAttribute("transform")で指定したmatrixを解除しようと思うと空文字列では描画に反映されない。面倒なので解除はsetAttribute("transform", "scale(1)")で済ます。
コード
行き詰まったので作りかけで晒しとく事にする。
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.0" width="192" height="256" viewBox="0 0 400 600" onload="startAnimation(event);"> <defs> <script type="text/ecmascript"><![CDATA[ var animationTransform = "matrix(0.9922505,-0.1242533,0.1242533,0.9922505,-24.988954,31.185689)" var animationElementIdentifiers = {0: "use_head_back", 1: "use_head_front", 2: "use_ribbon", 3: "use_face_sleepy"}; var animationElements = new Array(); function startAnimation(event) { for ( var i in animationElementIdentifiers ) { var element = event.target.ownerDocument.getElementById(animationElementIdentifiers[i]); animationElements[i] = element; } setTimeout("addTransform()", 1000); } function addTransform() { for ( var i in animationElements ) { animationElements[i].setAttribute("transform", animationTransform); } setTimeout("removeTransform()", 1000); } function removeTransform() { for ( var i in animationElements ) { animationElements[i].setAttribute("transform", "scale(1)"); } setTimeout("addTransform()", 1000); } ]]></script> <style type="text/css"><![CDATA[ path { fill-rule:evenodd; fill-opacity:1; stroke:#000000; stroke-width:2; stroke-linecap:round; stroke-linejoin:miter; stroke-opacity:1; opacity:1; } path.hair { fill:#ffbf7f; } path.skin { fill:#ffdfbf; } path.cloth.black { fill:#7f7f7f; } path.cloth.white { fill:#dfdfdf; } path.cloth.yellow { fill:#ffbf7f; } path.onion { fill:#ffbf7f; } ]]></style> <symbol id="head_back"> <path d="M 293.64617,236.02863 C 293.64617,236.02863 286.2478,234.89042 281.12585,234.32132 C 276.0039,233.75221 266.8982,226.35384 266.8982,226.35384 C 266.8982,226.35384 266.8982,229.19937 268.03642,234.32132 C 269.17463,239.44327 273.72747,246.27254 273.72747,246.27254 C 273.72747,246.27254 260.06894,241.15059 253.80877,234.89042 C 247.54861,228.63026 242.99577,218.95546 242.99577,218.95546 C 242.99577,218.95546 242.99577,225.78473 243.56487,234.89042 C 244.13398,243.99611 238.44292,257.65465 238.44292,257.65465 C 238.44292,257.65465 221.93441,244.2765 217.10145,239.72782 C 212.26406,235.17497 202.30471,220.37823 202.30471,220.37823 C 202.30471,220.37823 194.05268,234.89042 183.23967,240.58148 C 172.42666,246.27254 148.52422,246.27254 148.52422,246.27254 C 148.52422,246.27254 150.51609,243.99611 156.20715,238.87416 C 161.89821,233.75221 162.18276,228.63026 162.18276,228.63026 C 162.18276,228.63026 159.33723,232.614 154.21528,232.614 C 147.9293,232.61401 146.81691,230.90669 146.81691,230.90669 C 146.81691,230.90669 157.91447,229.91075 156.77626,202.73595 C 155.63805,176.13026 130.03391,95.886397 213.40227,96.597727 C 296.76772,97.309037 282.26406,167.30912 279.98764,192.7766 C 277.66075,218.80872 293.64617,236.02863 293.64617,236.02863 z " class="hair" id="hair_back" /> </symbol> <symbol id="body"> <path d="M 162.2703,368.23085 L 222.82413,372.63207 C 222.82413,372.63207 225.48926,319.84564 237.81962,294.1557 C 268.91826,229.36261 225.51368,243.95078 227.23983,230.54192 C 233.26934,183.70408 205.94552,211.58184 194.78828,231.4905 C 191.3952,237.54502 163.66202,229.18387 161.78116,265.67446 C 159.13389,317.31471 163.76985,369.7304 162.2703,368.23085 z " class="skin" id="torso" /> <path d="M 158.45592,352.30929 C 158.45592,352.30929 161.67526,354.32138 185.41795,355.93105 C 209.16065,357.54073 228.87915,355.52863 228.87915,355.52863 L 226.06222,370.41812 C 226.06222,370.41812 238.53719,371.62537 238.53719,376.05198 C 238.53719,380.47858 246.18315,386.91728 246.18315,386.91728 C 246.18315,386.91728 253.8291,401.80676 240.14687,416.69625 C 226.46464,431.58573 211.17274,429.17122 211.17274,429.17122 C 211.17274,429.17122 210.3679,426.35429 204.33162,423.93978 C 198.29534,421.52527 199.90502,415.08657 193.86874,412.26964 C 187.83247,409.45271 169.72364,413.07448 163.28494,415.48899 C 156.84625,417.90351 150.00513,423.13494 150.00513,423.13494 C 150.00513,423.13494 137.12773,426.35429 127.06726,415.08657 C 117.0068,403.81885 117.81164,381.68584 117.81164,381.68584 C 117.81164,381.68584 127.46968,378.46649 138.7374,372.83263 C 150.00513,367.19877 158.45591,366.79635 158.45591,366.79635 L 158.45592,352.30929 z " class="cloth black" id="pants" /> <path d="M 244.97589,333.79804 C 244.97589,333.79804 223.64771,340.63915 197.49051,339.02948 C 171.33331,337.4198 152.07524,327.741 152.07524,327.741 C 152.07524,327.741 157.84761,295.5994 159.66317,283.49572 C 163.28494,259.35062 196.68065,236.211 203.52679,237.2176 C 209.08785,238.03525 249.40249,268.60625 242.15896,292.34893 C 239.21387,302.00228 245.37831,334.20045 244.97589,333.79804 z " class="cloth white" id="shirt" /> </symbol> <symbol id="leg_right"> <path d="M 104.12942,440.43894 C 104.12942,440.43894 95.831482,407.09689 101.31248,399.79467 C 122.97222,370.93788 133.93207,380.556 146.80947,398.26242 C 159.68686,415.96883 143.164,422.3301 143.164,422.3301 L 148.39545,433.1954 L 104.12942,440.43894 z " class="skin" id="knee_right" /> <path d="M 122.47032,471.95746 C 122.47032,471.95746 117.17683,507.47727 147.40751,489.10176 C 173.90325,472.99651 161.43467,451.69601 161.43467,451.69601 L 122.47032,471.95746 z " class="cloth white" id="shoe_right" /> <path d="M 98.495552,407.0382 C 98.495552,407.0382 100.10522,442.85344 104.53183,455.32842 C 108.95843,467.80339 109.76327,481.08321 109.76327,481.08321 C 109.76327,481.08321 134.03294,492.02117 153.75146,480.75345 C 173.46997,469.48573 168.16578,454.62876 168.16578,454.62876 C 168.16578,454.62876 167.77375,450.83166 161.95421,443.62322 C 156.45342,436.80961 145.17611,424.74462 145.17611,424.74462 C 145.17611,424.74462 136.41399,430.67841 122.64066,430.37847 C 100.99095,429.90701 97.690712,408.24546 98.495552,407.0382 z " class="cloth black" id="calf_right" /> </symbol> <symbol id="chair"> <path d="M 176.33813,385.37823 C 176.33813,385.37823 164.34175,413.86965 110.358,437.86242 C 56.374262,461.85519 20.000302,577.41703 183.83588,575.82087 C 347.66242,574.22479 299.9709,455.33942 243.06803,435.61309 C 186.83497,416.11896 177.08791,385.37823 176.33813,385.37823 z " class="onion" id="onion" /> </symbol> <symbol id="arm_right"> <path d="M 144.54047,348.42701 L 160.19089,349.28067 C 160.19089,349.28067 167.05993,302.41109 173.84942,275.29692 C 177.44162,260.9513 164.45918,218.10181 149.94699,266.76034 C 140.57746,298.1758 144.25592,348.99612 144.54047,348.42701 z " class="skin" id="arm_uppder_right" /> <path d="M 168.49325,382.34107 C 162.91593,364.69802 164.00041,338.65736 164.00041,338.65736 C 164.00041,338.65736 157.25438,336.67323 150.90517,336.27641 C 144.55595,335.87958 137.46537,340.1924 137.46537,340.1924 C 137.46537,340.1924 130.88388,365.5447 127.70927,381.02089 C 124.53467,396.49708 122.8951,418.77157 122.8951,418.77157 C 122.8951,418.77157 125.38792,423.18274 140.69997,425.34531 C 156.0489,427.51309 171.57301,417.57335 171.57301,417.57335 C 171.57301,417.57335 174.1523,400.24263 168.49325,382.34107 z " class="cloth black" id="wrist_right" /> </symbol> <symbol id="leg_left"> <path d="M 274.35244,411.86723 L 255.46318,446.09721 C 255.46318,446.09721 239.49588,442.36004 219.24552,434.02465 C 203.70059,427.62609 196.32271,392.6708 216.40418,385.3076 C 228.47673,380.881 238.41933,381.51914 249.68704,390.77477 C 262.67681,401.44494 275.15728,412.67207 274.35244,411.86723 z " class="skin" id="knee_left" /> <path d="M 312.99577,428.38636 C 312.99577,428.38636 315.32146,438.93589 326.36975,454.84978 C 342.35308,477.87206 312.30536,498.34341 300.19089,476.19124 C 290.23154,457.97986 289.66243,451.7197 289.66243,451.7197 L 312.99577,428.38636 z " class="cloth white" id="shoe_left" /> <path d="M 253.8291,393.35597 C 253.8291,393.35597 272.74277,409.85513 287.22983,413.47689 C 301.7169,417.09866 312.5822,418.30592 312.5822,418.30592 C 312.5822,418.30592 327.06926,438.82927 309.76527,466.59614 C 299.16184,483.61096 284.01049,481.0832 284.01049,481.0832 C 284.01049,481.0832 271.13309,466.19372 260.26779,457.74293 C 249.4025,449.29214 236.12269,441.24377 236.12269,441.24377 C 236.12269,441.24377 251.50537,446.7112 261.07263,429.17122 C 270.73067,411.46481 255.03636,393.35597 253.8291,393.35597 z " class="cloth black" id="calf_left" /> </symbol> <symbol id="arm_left"> <path d="M 190.63804,350.13433 L 207.71121,359.24003 C 207.71121,359.24003 238.41575,306.40502 249.54048,289.80912 C 266.89821,263.91481 251.53235,229.48392 227.91446,271.88229 C 204.29658,314.28067 190.63804,350.70344 190.63804,350.13433 z " class="skin" id="arm_upper_left" /> <path d="M 188.76812,341.39062 C 188.76812,341.39062 195.51416,341.39061 203.45066,344.96204 C 211.38717,348.53347 214.56177,354.48585 214.56177,354.48585 C 214.56177,354.48585 209.40304,374.32712 207.41892,392.58109 C 205.43479,410.83506 205.83162,425.12078 205.83162,425.12078 C 205.83162,425.12078 201.86336,437.81919 179.64114,434.64458 C 157.41892,431.46998 141.94272,402.89856 141.94272,402.89856 C 141.94272,402.89856 153.68327,384.01514 165.75225,371.94617 C 177.26018,360.43824 188.76812,341.78744 188.76812,341.39062 z " class="cloth black" id="wrist_left" /> </symbol> <symbol id="neckband"> <path d="M 196.12199,275.67827 C 196.12199,275.67827 189.13591,276.12348 189.13591,276.12348 C 189.13591,276.12348 163.76812,290.20014 159.79987,300.5176 C 155.83162,310.83506 154.64114,337.81919 154.64114,337.81919 C 154.64114,337.81919 167.65171,321.46293 174.08559,317.97791 C 183.60939,312.81919 196.12199,275.67827 196.12199,275.67827 z " class="cloth yellow" id="scaphe_right" /> <path d="M 198.17191,274.41617 C 198.17191,274.41617 191.65818,276.70711 191.65818,276.70711 C 191.65818,276.70711 182.02209,302.1049 187.18082,312.42236 C 192.33955,322.73982 205.43479,339.80331 205.43479,339.80331 C 205.43479,339.80331 207.02209,323.9303 212.18082,310.83506 C 217.33955,297.73982 198.17191,274.41617 198.17191,274.41617 z " class="cloth yellow" id="scaphe_left" /> <path d="M 188.83846,279.32346 L 152.65702,244.16839 L 193.14278,228.02835 L 190.42576,272.10941 L 230.5653,228.05408 L 265.75225,251.70808 L 188.83846,279.32346 z " class="cloth black" id="lapel" /> </symbol> <symbol id="head_front"> <path d="M 144.7205,195.12616 C 141.733,211.29069 145.92544,214.76989 161.38717,221.94617 C 184.92441,232.87054 188.09115,236.51494 197.49828,234.24775 C 206.98832,231.96057 271.03216,220.56701 268.39474,155.09518 C 266.81487,115.65241 211.73856,88.795411 176.54288,109.91601 C 127.23108,139.50756 147.77135,178.61881 144.7205,195.12616 z " class="skin" id="skull" /> <path d="M 185.41795,101.20015 C 185.41795,101.20015 230.258,88.983319 259.86538,122.12591 C 286.82742,152.3073 269.52342,177.25725 269.52342,177.25725 L 256.24362,176.85482 C 256.24362,176.85482 259.7987,155.99035 238.13478,129.77186 C 217.63325,104.96014 185.41795,101.60257 185.41795,101.20015 z " class="cloth white" id="band" /> <path d="M 277.16936,151.10004 L 282.80323,150.69762 C 282.80323,150.69762 284.81533,161.96534 284.41291,170.41612 C 283.76099,184.10649 282.40081,193.35398 282.40081,193.35398 C 282.40081,193.35398 267.91375,203.41444 261.07264,202.6096 C 254.23152,201.80477 252.21943,177.25724 255.43877,168.80645 C 258.65812,160.35566 276.76695,150.69762 277.16936,151.10004 z " class="cloth white" id="earphone" /> <path d="M 188.82533,100.53031 C 153.52694,97.662877 122.21958,120.64802 115.35542,156.8668 C 105.5053,208.84098 142.73637,239.00966 142.73637,239.00966 C 142.73637,239.00966 133.60939,212.02554 140.35541,179.48585 C 145.08357,156.67949 160.1967,131.07316 160.1967,131.07316 C 160.1967,131.07316 166.14908,140.59697 187.18082,152.50173 C 208.21257,164.40649 232.41892,171.94617 232.41892,171.94617 C 232.41892,171.94617 236.68289,192.60098 233.6094,211.23189 C 230.52474,229.93051 222.10146,243.37474 222.10146,243.37474 C 222.10146,243.37474 239.92522,235.25311 251.06971,220.7557 C 263.84883,204.13188 266.04719,163.4929 252.657,139.00966 C 243.59847,122.44662 224.14405,103.39939 188.82533,100.53031 z " class="hair" id="hair_front" /> </symbol> <symbol id="ribbon"> <path d="M 199.86252,104.15607 C 199.86252,104.15607 199.99102,86.952895 199.99102,86.952895 C 199.99102,86.952895 187.18082,57.660455 167.33955,55.279502 C 147.49828,52.89855 112.97446,57.26363 112.97446,57.26363 C 112.97446,57.26363 128.84748,106.46998 153.05384,111.23188 C 177.30712,116.00302 199.86252,104.15607 199.86252,104.15607 z " class="cloth white" id="ribbon_right" /> <path d="M 203.80274,102.69734 C 203.80274,102.69734 199.73948,88.65758 199.73948,88.65758 C 199.73948,88.65758 220.38103,54.811261 239.16495,49.723947 C 258.21256,44.565217 288.3713,42.184264 288.3713,42.184264 C 288.3713,42.184264 272.10146,90.200137 259.00622,104.88268 C 245.91098,119.56522 203.80274,102.69734 203.80274,102.69734 z " class="cloth white" id="ribbon_left" /> <path d="M 201.21288,86.411264 C 201.21288,86.411264 203.32558,98.182007 207.04795,103.31284 C 209.12914,106.1815 196.88688,109.24852 194.47237,105.32494 C 192.05786,101.40136 191.04108,90.075024 195.78023,86.914287 C 207.27151,79.25028 201.21288,86.511869 201.21288,86.411264 z " class="cloth white" id="ribbon_knot" /> </symbol> <symbol id="face_sleepy"> <path d="M 142.02014,169.56522 C 142.02014,169.56522 148.32097,166.10994 155.63804,163.26441 C 162.95511,160.41888 171.8982,163.26441 171.8982,163.26441 M 142.46639,187.67444 C 169.8255,184.9255 145.72946,189.61593 159.31384,187.13784 C 115.36083,186.73083 198.93487,185.92551 152.33233,189.49059 C 154.18657,187.018 191.58539,189.76873 156.98072,188.9081 C 144.18286,186.52924 198.90441,188.65047 156.4402,189.91161 C 107.8466,188.812 203.6744,183.95177 157.72169,186.71643 C 190.85206,185.97495 159.97831,187.63937 155.12318,186.54463 C 184.81098,184.47562 177.60306,189.43561 145.03664,188.72813 C 162.37239,189.41678 186.76195,185.58637 159.35893,186.81439 C 121.42886,189.83918 204.68763,187.19191 156.65364,188.14951 C 195.4583,185.74592 152.37488,187.70209 146.30834,188.03151 M 203.29794,184.86216 C 215.53343,187.73749 244.86463,185.95942 210.38734,185.11104 C 224.97581,185.77619 252.39041,185.69806 221.89274,185.50013 C 186.76748,184.98273 228.85322,182.48741 232.17615,186.25331 C 220.74353,186.28382 193.75544,183.72686 221.8105,184.49977 C 252.63478,187.09307 188.88417,184.05753 221.53337,183.97661 C 265.17501,184.73366 211.01825,182.29295 199.47983,184.73304 C 212.1672,183.00319 258.01353,187.19151 219.90301,187.04175 C 190.70854,186.5721 210.63757,185.20164 227.9809,186.01343 C 214.24952,183.76851 183.20995,186.21482 213.92733,186.0679 C 238.19773,188.75083 177.20064,186.59884 218.66849,186.80116 C 237.86682,187.02924 243.91235,184.45978 219.73234,184.71172 C 202.31789,182.35792 249.44321,183.3099 219.03399,184.0344 C 175.32888,184.33753 267.93106,183.88966 225.0203,184.70913 C 208.92733,185.16397 259.57066,186.77824 229.79638,187.74341 C 198.76599,184.76042 236.08679,187.32743 238.05541,183.67045 C 241.65566,183.55575 218.15645,183.70806 221.49766,184.16551 M 197.10145,163.06116 C 197.10145,163.06116 204.60237,159.53256 214.17462,160.41888 C 225.15024,161.43515 237.75186,165.70344 237.75186,165.70344" style="fill:none" id="eye_sleepy" /> <path d="M 199.33722,221.80099 C 191.6779,222.4823 173.63497,222.84765 176.90955,219.82545 C 180.29232,216.70339 193.04037,220.02192 198.0275,218.47437 C 203.01463,216.92682 210.34282,220.67854 203.09212,221.46978 C 206.15327,229.14435 197.0733,230.93996 199.33722,221.80099 z " style="fill:#ffffff" id="mouse_sleepy" /> </symbol> </defs> <g> <use id="use_head_back" xlink:href="#head_back" /> <use xlink:href="#body" /> <use xlink:href="#leg_right" /> <use xlink:href="#chair" /> <use xlink:href="#arm_right" /> <use xlink:href="#leg_left" /> <use xlink:href="#arm_left" /> <use xlink:href="#neckband" /> <use id="use_head_front" xlink:href="#head_front" /> <use id="use_ribbon" xlink:href="#ribbon" /> <use id="use_face_sleepy" xlink:href="#face_sleepy" /> </g> </svg>
