Html 将SVG代码转换为VML代码

Html 将SVG代码转换为VML代码,html,internet-explorer,svg,jquery-svg,vml,Html,Internet Explorer,Svg,Jquery Svg,Vml,我已经使用Javascript/Jquery创建了HTML5SVG图表。请参考下面的SVG元素 <svg id="container_svg" style="width: 1350px; height: 600px;"><rect id="container_svg_SvgRect" x="0" y="0" width="1350" height="600" fill="transparent" stroke-width="0" stroke="transparent"/>

我已经使用Javascript/Jquery创建了HTML5SVG图表。请参考下面的SVG元素

<svg id="container_svg" style="width: 1350px; height: 600px;"><rect id="container_svg_SvgRect" x="0" y="0" width="1350" height="600" fill="transparent" stroke-width="0" stroke="transparent"/><rect id="container_svg_ChartArea" x="89.5" y="58" width="1240.5" height="448.5" fill="transparent" stroke-width="0.5" opacity="0.3" stroke="Gray"/><g id="container_svg_XAxis"><g id="container_svg_XAxisGrid_0"><defs><clipPath id="container_svg_XAxisGrid_0_XTicksClipRect"><rect id="container_svg_XAxisGrid_0_XTicksClipRect" x="89.5" y="506.5" width="1240" height="20.5" fill="white" stroke-width="1" stroke="transparent"/></clipPath></defs><line id="container_svg_XAxisLine" x1="89.5" y1="506.5" x2="1329.5" y2="506.5" stroke-dasharray="" stroke-width="0.5" stroke="#686868"/><path id="container_svg_XAxisMajorTicks" fill="none" stroke-width="0.8" stroke="#B7B7B7" clip-path="url(#container_svg_XAxisGrid_0_XTicksClipRect)" d="M 89.5 511.75 L 89.5 506.75 M 213.5 511.75 L 213.5 506.75 M 337.5 511.75 L 337.5 506.75 M 461.5 511.75 L 461.5 506.75 M 586.5 511.75 L 586.5 506.75 M 709.5 511.75 L 709.5 506.75 M 833.5 511.75 L 833.5 506.75 M 957.5 511.75 L 957.5 506.75 M 1082.5 511.75 L 1082.5 506.75 M 1206.5 511.75 L 1206.5 506.75 M 1329.5 511.75 L 1329.5 506.75 "/><path id="container_svg_XAxisMajorGridLines" fill="none" stroke-width="0.5" stroke="#B7B7B7" opacity="0.3" stroke-dasharray="" clip-path="url(#container_svg_ChartAreaClipRect)" d="M 89.5 506.5 L 89.5 58 M 213.5 506.5 L 213.5 58 M 337.5 506.5 L 337.5 58 M 461.5 506.5 L 461.5 58 M 586.5 506.5 L 586.5 58 M 709.5 506.5 L 709.5 58 M 833.5 506.5 L 833.5 58 M 957.5 506.5 L 957.5 58 M 1082.5 506.5 L 1082.5 58 M 1206.5 506.5 L 1206.5 58 "/></g><g id="container_svg_XAxisLabels_0" clip-path="url(#container_svg_XLabelClipRect)"><defs><clipPath id="container_svg_XLabelClipRect"><rect id="container_svg_XLabelClipRect" x="0" y="0" width="1350" height="600" stroke="transparent"/></clipPath></defs><text id="container_svg_XLabel_0" x="89.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="middle">Jul-2000</text><text id="container_svg_XLabel_1" x="212.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="middle">Jul-2001</text><text id="container_svg_XLabel_2" x="336.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="middle">Jul-2002</text><text id="container_svg_XLabel_3" x="460.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="middle">Jul-2003</text><text id="container_svg_XLabel_4" x="585.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="middle">Jul-2004</text><text id="container_svg_XLabel_5" x="709.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="middle">Jul-2005</text><text id="container_svg_XLabel_6" x="832.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="middle">Jul-2006</text><text id="container_svg_XLabel_7" x="956.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="middle">Jul-2007</text><text id="container_svg_XLabel_8" x="1081.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="middle">Jul-2008</text><text id="container_svg_XLabel_9" x="1205.5" y="524.25" fill="#707070" font-size="11px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="middle">Jul-2009</text><text id="container_svg_XLabel_10" x="1348" y="524.25" fill="#707070" font-size="11px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="end">Jul-2010</text></g></g><g id="container_svg_YAxis"><g id="container_svg_YAxisGrid_1"><line id="container_svg_YAxisLine" x1="89.5" y1="506.5" x2="89.5" y2="58.5" stroke-width="0.5" stroke-dasharray="" stroke="#686868"/><defs><clipPath id="container_svg_YAxisGrid_1_YTicksClipRect"><rect id="container_svg_YAxisGrid_1_YTicksClipRect" x="60" y="58.5" width="29.5" height="448" fill="white" stroke-width="1" stroke="transparent"/></clipPath></defs><path id="container_svg_YAxisMajorTicks" fill="none" stroke-width="1" stroke="#B7B7B7" clip-path="url(#container_svg_YAxisGrid_1_YTicksClipRect)" d="M 84.25 506.5 L 89.25 506.5 M 84.25 461.7 L 89.25 461.7 M 84.25 416.9 L 89.25 416.9 M 84.25 372.1 L 89.25 372.1 M 84.25 327.29999999999995 L 89.25 327.29999999999995 M 84.25 282.5 L 89.25 282.5 M 84.25 237.7 L 89.25 237.7 M 84.25 192.90000000000003 L 89.25 192.90000000000003 M 84.25 148.09999999999997 L 89.25 148.09999999999997 M 84.25 103.30000000000001 L 89.25 103.30000000000001 M 84.25 58.5 L 89.25 58.5 "/><path id="container_svg_YAxisMajorGridLines" fill="none" stroke-width="0.5" opacity="0.3" stroke-dasharray="" stroke="#B7B7B7" clip-path="url(#container_svg_ChartAreaClipRect)" d="M 89.5 506.5 L 1330 506.5 M 89.5 461.7 L 1330 461.7 M 89.5 416.9 L 1330 416.9 M 89.5 372.1 L 1330 372.1 M 89.5 327.29999999999995 L 1330 327.29999999999995 M 89.5 282.5 L 1330 282.5 M 89.5 237.7 L 1330 237.7 M 89.5 192.90000000000003 L 1330 192.90000000000003 M 89.5 148.09999999999997 L 1330 148.09999999999997 M 89.5 103.30000000000001 L 1330 103.30000000000001 M 89.5 58.5 L 1330 58.5 "/></g><g id="container_svg_YAxisLabels_1"><text id="container_svg_YLabel_0" x="79.25" y="509.5" fill="#707070" font-size="12px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="end">$0</text><text id="container_svg_YLabel_1" x="79.25" y="464.7" fill="#707070" font-size="12px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="end">$10</text><text id="container_svg_YLabel_2" x="79.25" y="419.9" fill="#707070" font-size="12px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="end">$20</text><text id="container_svg_YLabel_3" x="79.25" y="375.1" fill="#707070" font-size="12px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="end">$30</text><text id="container_svg_YLabel_4" x="79.25" y="330.29999999999995" fill="#707070" font-size="12px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="end">$40</text><text id="container_svg_YLabel_5" x="79.25" y="285.5" fill="#707070" font-size="12px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="end">$50</text><text id="container_svg_YLabel_6" x="79.25" y="240.7" fill="#707070" font-size="12px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="end">$60</text><text id="container_svg_YLabel_7" x="79.25" y="195.90000000000003" fill="#707070" font-size="12px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="end">$70</text><text id="container_svg_YLabel_8" x="79.25" y="151.09999999999997" fill="#707070" font-size="12px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="end">$80</text><text id="container_svg_YLabel_9" x="79.25" y="106.30000000000001" fill="#707070" font-size="12px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="end">$90</text><text id="container_svg_YLabel_10" x="79.25" y="61.5" fill="#707070" font-size="12px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="end">$100</text></g></g><defs><clipPath id="container_svg_ChartAreaClipRect"><rect id="container_svg_ChartAreaClipRect" x="89.5" y="58" width="1240.5" height="448.5" fill="white" stroke-width="1" stroke="Gray"/></clipPath></defs><g id="container_svg_TitleCollection"><text id="container_svg_XAxisTitle_0" x="709.5" y="547" fill="#707070" font-size="14px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="middle" dominant-baseline="middle">Sales Across Years</text><text id="container_svg_YAxisTitle_1" x="30" y="282.5" fill="#707070" transform="rotate(-90,30,282.5)" font-size="14px" font-family="Segoe UI" font-style="Normal " font-weight="regular" opacity="1" text-anchor="middle" dominant-baseline="middle">Sales Amount in millions(USD)</text><text id="container_svg_ChartTitle" x="592.25" y="39" fill="#707070" font-size="20px" font-family="Segoe UI" font-style="Normal " font-weight="regular" text-anchor="start">Average Sales Comparsion</text></g><g id="container_svg_SeriesCollection" clip-path="url(#container_svg_ChartAreaClipRect)"><g id="container_svg_SeriesGroup_0" transform="translate(89.5,506.5)" clip-path="url(#container_svg_SeriesGroup_0_ClipRect)"><path id="container_svg_Sales_0" fill="none" stroke-dasharray="" stroke-width="3" stroke="#E94649" stroke-linecap="butt" stroke-linejoin="round" d="M 3.3953997809419496 -44.800000000000004 L 219.00328587075578 -134.4 M 219.00328587075578 -134.4 L 466.86746987951807 -67.2 M 466.86746987951807 -67.2 L 722.880613362541 -291.2 M 722.880613362541 -291.2 L 963.6144578313254 -403.2 M 963.6144578313254 -403.2 L 1211.4786418400877 -380.8 "/><defs><clipPath id="container_svg_SeriesGroup_0_ClipRect"><rect id="container_svg_SeriesGroup_0_ClipRect" x="3.39453125" y="-406.19921875" width="1208.0859375" height="364.3984375" fill="white" stroke-width="1" stroke="transparent" style="display: inline-block; width: 1208.09px;"/></clipPath></defs></g><g id="container_svg_symbolGroup_0" transform="translate(89.5,506.5)"><circle id="container_svg_circlesymbol_0_0" cx="3.3953997809419496" cy="-44.800000000000004" r="7.0710678118654755" fill="#E94649" stroke-width="3" stroke="white" opacity="1" transform="translate(3.39453125 -44.80078125) scale(1) translate(-3.39453125 44.80078125)"/><circle id="container_svg_circlesymbol_1_0" cx="219.00328587075578" cy="-134.4" r="7.0710678118654755" fill="#E94649" stroke-width="3" stroke="white" opacity="1" transform="translate(219.00390625 -134.400390625) scale(1) translate(-219.00390625 134.400390625)"/><circle id="container_svg_circlesymbol_2_0" cx="466.86746987951807" cy="-67.2" r="7.0710678118654755" fill="#E94649" stroke-width="3" stroke="white" opacity="1" transform="translate(466.8671875 -67.19921875) scale(1) translate(-466.8671875 67.19921875)"/><circle id="container_svg_circlesymbol_3_0" cx="722.880613362541" cy="-291.2" r="7.0710678118654755" fill="#E94649" stroke-width="3" stroke="white" opacity="1" transform="translate(722.880859375 -291.19921875) scale(1) translate(-722.880859375 291.19921875)"/><circle id="container_svg_circlesymbol_4_0" cx="963.6144578313254" cy="-403.2" r="7.0710678118654755" fill="#E94649" stroke-width="3" stroke="white" opacity="1" transform="translate(963.61328125 -403.19921875) scale(1) translate(-963.61328125 403.19921875)"/><circle id="container_svg_circlesymbol_5_0" cx="1211.4786418400877" cy="-380.8" r="7.0710678118654755" fill="#E94649" stroke-width="3" stroke="white" opacity="1" transform="translate(1211.478515625 -380.80078125) scale(1) translate(-1211.478515625 380.80078125)"/></g></g></svg>
Jul-2000Jul-2001Jul-2002Jul-2003Jul-2004Jul-2005Jul-2006Jul-2007Jul-2008Jul-2009Jul-2010$0$10$20$30$40$50$60$70$80$90$100跨年度销售金额(百万美元)平均销售比较
我想将此SVG代码转换为VML,因为我需要在IE5,6,7版本中呈现图表

如何将SVG元素转换为VML元素。我知道有一个在线工具可以将SVG图像转换为VM元素

但是我没有SVG图像,而只有SVG元素,我想转换成VML代码

我该怎么做


对于所有SVG元素到VML元素的转换,是否有最佳的文档可供参考。

有许多JavaScript库设计用于允许旧IE支持SVG图像

这里有一张名单

它们使用各种技术,并提供各种功能,因此您需要自己对它们进行评估,以确定哪一种最适合您的情况,但它们中的大多数最终将SVG转换为VML,作为旧IE的后备

其中一两个还使用其他技术(Flash、Silverlight等)来进行转换,这可能是一件好事,因为VML可能会很慢,而且IE并不是唯一一个仍在使用的不支持SVG的旧浏览器(例如Android 2.3和更早版本)

但总的来说,这些库的想法是它们对用户和开发人员都是透明的;您只需提供SVG,库就会将其显示给用户。您不需要担心它是VML或其他任何东西;您需要担心的只是SVG

我注意到您的问题指定您需要支持IE5。我要警告您,这些脚本中的许多不太可能在IE5中工作。IE6应该相当安全,但IE5将很难支持

忽略IE5方面,如果您使用JavaScript创建图像(如问题中所暗示的),我建议使用作为最佳选项。但是,请尝试列出的各种脚本,看看哪些脚本适合您


希望能有所帮助。

您的示例是一个完整的SVG文件,转换器似乎可以翻译这种文件。您在尝试转换器时遇到问题了吗?@Robert抱歉,我不知道如何使用该链接将svg文件转换为VML?你能解释一下吗?是的。但是我需要为IE7和IE8提供支持,所以我选择了VML。将SVG转换为VML是非常复杂的吗?谢谢。我已经用纯java脚本/jquery编写了SVG图表。我想在IE旧版本中支持,所以我选择VML,对于更高版本和其他浏览器,SVG可以工作吗?将SVG转换为VML是否非常复杂?我只想在VML中使用SVG。那么有没有关于SVG到VML的好教程呢?