Pregunta

I have created HTML 5 SVG chart using Javascript/Jquery.Please refer below SVG element.

<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>

I want to convert this SVG code to VML because I need to render chart in IE 5,6 ,7 version.

How can I convert SVG element to VML element. I knew there is online tool to convert SVG image to VM element.

http://vectorconverter.sourceforge.net/

But am not having an SVG image instead of this am having only SVG element using this I want to covert into VML code.

How can I do this?

Is there any best document to refer for transition of all SVG elements to VML element.

¿Fue útil?

Solución

There are a number of JavaScript libraries that are designed to allow old IE to support SVG images.

There's a list of them here.

They use various techniques, and offer various features, so you'll need to evaluate them yourself to determine which is most suitable to your situation, but most of them ultimately convert the SVG to VML as a fall-back for old IE.

One or two of them also use other technologies (Flash, Silverlight, etc) to do the conversion, which may be a good thing, since VML can be slow, and also because IE isn't the only old browser still in use that doesn't support SVG (eg Android 2.3 and earlier).

But in general, the idea of these libraries is that they're transparent to the user and to the developer; you just provide the SVG, and the library displays it to the user. You don't need to worry about it being VML or anything else; all you need to worry about is the SVG.

I note that your question specifies that you need to support IE5. I would warn you that it's very unlikely that many of these scripts will work in IE5. IE6 should be fairly safe, but IE5 is going to be very difficult to support.

Ignoring the IE5 aspect, if you're creating your images in JavaScript, as implied in the question, I would suggest using the Raphael library as the best option. But try out the various scripts listed and see what works for you.

Hope that helps.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top