0

我使用 Javascript/Jquery 创建了 HTML 5 SVG 图表。请参阅下面的 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>

我想将此 SVG 代码转换为 VML,因为我需要在 IE 5,6 ,7 版本中呈现图表。

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

http://vectorconverter.sourceforge.net/

但是我没有 SVG 图像,而不是只有 SVG 元素,我想将其转换为 VML 代码。

我怎样才能做到这一点?

是否有任何最佳文档可参考将所有 SVG 元素转换为 VML 元素。

4

1 回答 1

2

有许多 JavaScript 库旨在让旧版 IE 支持 SVG 图像。

这里有他们的清单。

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

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

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

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

忽略 IE5 方面,如果您在 JavaScript 中创建图像,正如问题所暗示的那样,我建议使用Raphael 库作为最佳选择。但是请尝试列出的各种脚本,看看哪些对您有用。

希望有帮助。

于 2013-08-13T09:21:43.780 回答