vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-11-22 22:27:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix export issue on tranformation on SVG maps produced by IE9.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2012-08-28 00:13:50 -03:00
parent 8f87359b78
commit 80deb4922b
3 changed files with 360 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
wise-webapp/src/main/java/com/wisemapping/exporter/ExporterFactory.java
View File

@ -217,7 +217,7 @@ public class ExporterFactory {
String imgUrl = elem.getAttribute("href"); String imgUrl = elem.getAttribute("href");
elem.removeAttribute("href"); elem.removeAttribute("href");
if(imgUrl==null || imgUrl.isEmpty()){ if (imgUrl == null || imgUrl.isEmpty()) {
imgUrl = elem.getAttribute("xlink:href"); // Do not support namespaces ... imgUrl = elem.getAttribute("xlink:href"); // Do not support namespaces ...
elem.removeAttribute("xlink:href"); elem.removeAttribute("xlink:href");
} }
@ -347,7 +347,7 @@ public class ExporterFactory {
final int initTranslate = value.indexOf("(", pos); final int initTranslate = value.indexOf("(", pos);
final int endTranslate = value.indexOf(")", pos); final int endTranslate = value.indexOf(")", pos);
final String transate = value.substring(initTranslate + 1, endTranslate); final String transate = value.substring(initTranslate + 1, endTranslate);
return transate.split(","); return transate.contains(",") ? transate.split(",") : transate.split(" ");
} }
} }

BIN
wise-webapp/src/test/resources/data/svg/bug2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB

358
wise-webapp/src/test/resources/data/svg/bug2.svg Normal file
View File

@ -0,0 +1,358 @@
<svg xmlns="http://www.w3.org/2000/svg" id="workspace" viewBox="-493.982 -333.951 1518.06 853.494"
preserveAspectRatio="none meet" focusable="true" width="1366" height="768">
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 32 0 65 291 97 291 C 65 294 32 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 32 0 65 259 97 259 C 65 262 32 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 32 0 65 228 97 228 C 65 231 32 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 32 0 65 195 97 195 C 65 198 32 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 32 0 66 162 98 162 C 66 165 32 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 32 0 66 129 98 129 C 66 132 32 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 32 0 66 96 98 96 C 66 99 32 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 32 0 66 63 98 63 C 66 66 32 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 32 0 65 31 97 31 C 65 34 32 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 26 0 52 6 78 6 C 52 9 26 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 32 0 66 -19 98 -19 C 66 -16 32 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 32 0 66 -52 98 -52 C 66 -49 32 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 32 0 66 -85 98 -85 C 66 -82 32 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 32 0 66 -115 98 -115 C 66 -112 32 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 32 0 66 -145 98 -145 C 66 -142 32 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 32 0 65 -175 97 -175 C 65 -172 32 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 32 0 66 -205 98 -205 C 66 -202 32 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C -33 0 -66 16 -99 16 C -66 19 -33 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 32 0 66 -235 98 -235 C 66 -232 32 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C -33 0 -66 -15 -99 -15 C -66 -12 -33 5 0 7 Z"/>
<path visibility="visible" style="fill: #495879;" fill="#495879" fill-opacity="1" stroke="#495879"
stroke-opacity="1" stroke-width="1px" d="M 0 0 C 32 0 66 -268 98 -268 C 66 -265 32 5 0 7 Z"/>
<rect visibility="hidden" fill="#cc0033" fill-opacity="0.4" stroke="#ff9933" stroke-opacity="0.4" stroke-width="1px"
x="-69" y="-21" width="139" height="42" rx="0" ry="0"/>
<path visibility="hidden" style="fill: none;" fill-opacity="0.4" stroke="#cc0033" stroke-opacity="0.4"
stroke-width="1px"/>
<path visibility="hidden" style="fill: none;" fill-opacity="0.4" stroke="#cc0033" stroke-opacity="0.4"
stroke-width="1px" d="M -92 -46 C -61.3333 -30.6667 -30.6667 -15.3333 0 0"/>
<g visibility="visible" transform="translate(-67 -19) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect style="cursor: default;" fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)"
stroke-opacity="0" stroke-width="1px" x="-2" y="-3" width="139" height="44" rx="6.6" ry="6.6"/>
<rect style="cursor: default;" fill="rgb(80, 157, 192)" stroke="rgb(57, 113, 177)" stroke-width="2px" x="0"
y="0" width="135" height="38" rx="5.7" ry="5.7"/>
<text font-family="verdana" font-size="13.4375" font-style="normal" font-weight="bold" visibility="visible"
style="cursor: default;" fill="#ffffff" x="11" y="11">
<tspan x="11" dy="1em">Script_Bro_P1</tspan>
</text>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="16"/>
</g>
<g visibility="visible" transform="translate(98 -291) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect style="cursor: move;" fill="rgb(244, 184, 45)" fill-opacity="1" stroke="rgb(241, 163, 39)"
stroke-opacity="1" stroke-width="1px" x="-2" y="-3" width="104" height="29" rx="4.35" ry="4.35"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px" x1="0" y1="23" x2="100"
y2="23"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">??????favor</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="15"/>
</g>
<g visibility="visible" transform="translate(-133 -25) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="40" height="27" rx="4.05" ry="4.05"/>
<rect style="cursor: move;" fill="#ff0000" stroke="rgb(2, 59, 185)" stroke-width="2px" x="0" y="0" width="36"
height="21" rx="3.15" ry="3.15"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">enter</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="#ff0000" stroke="rgb(2, 59, 185)" stroke-width="1px"
cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="13"/>
</g>
<g visibility="visible" transform="translate(98 -258) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="124" height="29" rx="4.35" ry="4.35"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px" x1="0" y1="23" x2="120"
y2="23"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">??/????????</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="15"/>
</g>
<g visibility="visible" transform="translate(-124 5) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="31" height="27" rx="4.05" ry="4.05"/>
<rect style="cursor: move;" fill="#ff0000" stroke="rgb(2, 59, 185)" stroke-width="2px" x="0" y="0" width="27"
height="21" rx="3.15" ry="3.15"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">exit</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="#ff0000" stroke="rgb(2, 59, 185)" stroke-width="1px"
cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="13"/>
</g>
<g visibility="visible" transform="translate(98 -225) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="140" height="26" rx="3.9" ry="3.9"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px" x1="0" y1="20" x2="136"
y2="20"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">????????????</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="12"/>
</g>
<g visibility="visible" transform="translate(97 -195) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="119" height="26" rx="3.9" ry="3.9"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px" x1="0" y1="20" x2="115"
y2="20"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">??????????</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="12"/>
</g>
<g visibility="visible" transform="translate(98 -165) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="140" height="26" rx="3.9" ry="3.9"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px" x1="0" y1="20" x2="136"
y2="20"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">????????????</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="12"/>
</g>
<g visibility="visible" transform="translate(98 -135) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="108" height="26" rx="3.9" ry="3.9"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px" x1="0" y1="20" x2="104"
y2="20"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">?????????</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="12"/>
</g>
<g visibility="visible" transform="translate(98 -105) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="108" height="26" rx="3.9" ry="3.9"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px" x1="0" y1="20" x2="104"
y2="20"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">?????????</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="12"/>
</g>
<g visibility="visible" transform="translate(98 -75) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="126" height="29" rx="4.35" ry="4.35"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px" x1="0" y1="23" x2="122"
y2="23"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">?????????X?</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="15"/>
</g>
<g visibility="visible" transform="translate(98 -42) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="116" height="29" rx="4.35" ry="4.35"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px" x1="0" y1="23" x2="112"
y2="23"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">??-->??????</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="15"/>
</g>
<g visibility="visible" transform="translate(78 -14) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="40" height="40" rx="6" ry="6"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">????</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="12"/>
</g>
<g visibility="visible" transform="translate(97 11) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="65" height="26" rx="3.9" ry="3.9"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px" x1="0" y1="20" x2="61"
y2="20"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">?????</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="12"/>
</g>
<g visibility="visible" transform="translate(98 40) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="94" height="29" rx="4.35" ry="4.35"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px" x1="0" y1="23" x2="90"
y2="23"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">??-->????</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="15"/>
</g>
<g visibility="visible" transform="translate(98 73) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="50" height="29" rx="4.35" ry="4.35"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px" x1="0" y1="23" x2="46"
y2="23"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">??tab</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="15"/>
</g>
<g visibility="visible" transform="translate(98 106) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="184" height="29" rx="4.35" ry="4.35"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px" x1="0" y1="23" x2="180"
y2="23"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">???>???????->????</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="15"/>
</g>
<g visibility="visible" transform="translate(98 139) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="162" height="29" rx="4.35" ry="4.35"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px" x1="0" y1="23" x2="158"
y2="23"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">???>????->javascript</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="15"/>
</g>
<g visibility="visible" transform="translate(97 172) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="147" height="29" rx="4.35" ry="4.35"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px" x1="0" y1="23" x2="143"
y2="23"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">???>??>??????</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="15"/>
</g>
<g visibility="visible" transform="translate(97 205) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="147" height="29" rx="4.35" ry="4.35"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px" x1="0" y1="23" x2="143"
y2="23"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">???>????>????</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="15"/>
</g>
<g visibility="visible" transform="translate(97 239) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="87" height="26" rx="3.9" ry="3.9"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px" x1="0" y1="20" x2="83"
y2="20"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">???????</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="12"/>
</g>
<g visibility="visible" transform="translate(97 268) scale(1)" focusable="true" preserveAspectRatio="none"
width="100" height="100">
<rect fill="rgb(252, 235, 192)" fill-opacity="0" stroke="rgb(241, 163, 39)" stroke-opacity="0"
stroke-width="1px" x="-2" y="-3" width="147" height="29" rx="4.35" ry="4.35"/>
<line style="cursor: move;" stroke="#495879" stroke-opacity="1" stroke-width="1px" x1="0" y1="23" x2="143"
y2="23"/>
<text font-family="verdana" font-size="10.75" font-style="normal" font-weight="normal" visibility="visible"
style="cursor: move;" fill="rgb(82, 92, 97)" x="4" y="4">
<tspan x="4" dy="1em">Browser ?call?SM???</tspan>
</text>
<ellipse visibility="hidden" style="cursor: default;" fill="rgb(224, 229, 239)" stroke="rgb(2, 59, 185)"
stroke-width="1px" cx="3" cy="3" rx="3" ry="3" width="6" height="6"/>
<g transform="" focusable="true" preserveAspectRatio="none" width="0" height="15"/>
</g>
<rect visibility="hidden" fill="#cc0033" fill-opacity="0.4" stroke="#ff9933" stroke-opacity="0.4" stroke-width="1px"
x="-140" y="-49" width="50" height="6" rx="0" ry="0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB