假设我的页面中有一个svg就像：
<svg style="width: 100%; height: 100%; overflow: hidden; left: 0px; top: -0.666667px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><defs><clipPath id="kdef3"><path d="M57 58.5 L 591 58.5 591 349 57 349Z" stroke="#000" stroke-linejoin="miter" fill="none"></path></clipPath><clipPath id="kdef4"><path d="M5 5 L 592 5 592 395 5 395Z" stroke="#000" stroke-linejoin="miter" fill="none"></path></clipPath></defs><g><path d="M0 0 L 597 0 597 400 0 400Z" stroke="none" fill="#fff"></path><path d="M57 58.5 L 591 58.5 591 349 57 349Z" stroke="none" fill="#fff" fill-opacity="0"></path><g><g></g><g><path d="M57.5 317.5 L 591.5 317.5" stroke="#dfdfdf" stroke-width="1" fill="none"></path><path d="M57.5 284.5 L 591.5 284.5" stroke="#dfdfdf" stroke-width="1" fill="none"></path><path d="M57.5 252.5 L 591.5 252.5" stroke="#dfdfdf" stroke-width="1" fill="none"></path><path d="M57.5 220.5 L 591.5 220.5" stroke="#dfdfdf" stroke-width="1" fill="none"></path><path d="M57.5 188.5 L 591.5 188.5" stroke="#dfdfdf" stroke-width="1" fill="none"></path><path d="M57.5 155.5 L 591.5 155.5" stroke="#dfdfdf" stroke-width="1" fill="none"></path><path d="M57.5 123.5 L 591.5 123.5" stroke="#dfdfdf" stroke-width="1" fill="none"></path><path d="M57.5 91.5 L 591.5 91.5" stroke="#dfdfdf" stroke-width="1" fill="none"></path><path d="M57.5 59.5 L 591.5 59.5" stroke="#dfdfdf" stroke-width="1" fill="none"></path></g><g><g><g><path d="M57.5 349.5 L 591.5 349.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M57.5 349.5 L 57.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M75.5 349.5 L 75.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M93.5 349.5 L 93.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M110.5 349.5 L 110.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M128.5 349.5 L 128.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M146.5 349.5 L 146.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M164.5 349.5 L 164.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M182.5 349.5 L 182.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M199.5 349.5 L 199.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M217.5 349.5 L 217.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M235.5 349.5 L 235.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M253.5 349.5 L 253.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M271.5 349.5 L 271.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M288.5 349.5 L 288.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M306.5 349.5 L 306.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M324.5 349.5 L 324.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M342.5 349.5 L 342.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M360.5 349.5 L 360.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M377.5 349.5 L 377.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M395.5 349.5 L 395.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M413.5 349.5 L 413.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M431.5 349.5 L 431.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M449.5 349.5 L 449.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M466.5 349.5 L 466.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M484.5 349.5 L 484.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M502.5 349.5 L 502.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M520.5 349.5 L 520.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M538.5 349.5 L 538.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M555.5 349.5 L 555.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M573.5 349.5 L 573.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path><path d="M591.5 349.5 L 591.5 353.5" stroke="#000001" stroke-width="1" fill="none"></path></g></g></g><g clip-path="url(#kdef3)"><g clip-path="url(#kdef4)"><path d="M65.9 334.798 C 71.827 329.853 77.773 324.034 83.7 319.95 89.627 315.866 95.573 313.599 101.5 310.267 107.427 306.935 113.373 303.055 119.3 299.938 125.227 296.821 131.173 294.018 137.1 291.546 143.027 289.073 148.973 287.455 154.9 285.09 160.827 282.725 166.773 279.708 172.7 277.343 178.627 274.979 184.573 273.037 190.5 270.888 196.427 268.738 202.373 266.797 208.3 264.432 214.227 262.068 220.173 260.34 226.1 256.686 232.027 253.031 237.973 246.353 243.9 242.483 249.827 238.614 255.773 236.778 261.7 233.446 267.627 230.114 273.573 225.481 279.5 222.471 285.427 219.462 291.373 218.487 297.3 215.37 303.227 212.253 309.173 206.76 315.1 203.75 321.027 200.74 326.973 199.767 332.9 197.294 338.827 194.822 344.773 192.664 350.7 188.902 356.627 185.14 362.573 177.925 368.5 174.7 374.427 171.475 380.373 172.223 386.3 169.536 392.227 166.848 398.173 161.463 404.1 158.561 410.027 155.659 415.973 154.47 421.9 152.106 427.827 149.741 433.773 147.153 439.7 144.359 445.627 141.564 451.573 137.686 457.5 135.321 463.427 132.956 469.373 132.091 475.3 130.157 481.227 128.222 487.173 125.958 493.1 123.701 499.027 121.444 504.973 119.287 510.9 116.6 516.827 113.913 522.773 110.679 528.7 107.562 534.627 104.445 540.573 101.426 546.5 97.879 552.427 94.332 558.373 89.698 564.3 86.259 570.227 82.819 576.173 80.231 582.1 77.221" stroke="#ff6800" stroke-width="2" fill="none"></path><path d="M65.9 341.899 C 71.827 337.814 77.773 333.61 83.7 329.633 89.627 325.656 95.573 321.13 101.5 318.013 107.427 314.896 113.373 313.814 119.3 310.912 125.227 308.01 131.173 303.915 137.1 300.583 143.027 297.251 148.973 294.34 154.9 290.9 160.827 287.46 166.773 283.365 172.7 279.926 178.627 276.486 184.573 274.327 190.5 270.242 196.427 266.158 202.373 258.619 208.3 255.394 214.227 252.17 220.173 252.595 226.1 250.876 232.027 249.156 237.973 247.43 243.9 245.066 249.827 242.701 255.773 239.575 261.7 236.673 267.627 233.771 273.573 230.538 279.5 227.636 285.427 224.733 291.373 221.93 297.3 219.243 303.227 216.556 309.173 214.076 315.1 211.497 321.027 208.917 326.973 206.007 332.9 203.75 338.827 201.493 344.773 200.197 350.7 197.94 356.627 195.683 362.573 192.558 368.5 190.193 374.427 187.829 380.373 186.317 386.3 183.738 392.227 181.158 398.173 177.28 404.1 174.7 410.027 172.12 415.973 170.394 421.9 168.244 427.827 166.095 433.773 164.046 439.7 161.789 445.627 159.532 451.573 157.16 457.5 154.688 463.427 152.216 469.373 149.736 475.3 146.941 481.227 144.147 487.173 140.913 493.1 137.903 499.027 134.894 504.973 132.52 510.9 128.866 516.827 125.211 522.773 120.039 528.7 115.954 534.627 111.87 540.573 107.989 546.5 104.334 552.427 100.68 558.373 94.006 564.3 94.006 570.227 94.006 576.173 94.006 582.1 94.006" stroke="#a0a700" stroke-width="2" fill="none"></path><circle cx="65.9" cy="334.798" r="4.0000000000000036" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="65.9" cy="341.899" r="4.0000000000000036" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="83.7" cy="319.95" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="83.7" cy="329.633" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="101.5" cy="310.267" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="101.5" cy="318.013" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="119.3" cy="299.938" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="119.3" cy="310.912" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="137.1" cy="291.546" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="137.1" cy="300.583" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="154.9" cy="285.09" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="154.9" cy="290.9" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="172.7" cy="277.343" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="172.7" cy="279.926" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="190.5" cy="270.888" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="190.5" cy="270.242" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="208.3" cy="264.432" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="208.3" cy="255.394" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="226.1" cy="256.686" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="226.1" cy="250.876" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="243.9" cy="242.483" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="243.9" cy="245.066" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="261.7" cy="233.446" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="261.7" cy="236.673" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="279.5" cy="222.471" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="279.5" cy="227.636" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="297.3" cy="215.37" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="297.3" cy="219.243" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="315.1" cy="203.75" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="315.1" cy="211.497" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="332.9" cy="197.294" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="332.9" cy="203.75" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="350.7" cy="188.902" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="350.7" cy="197.94" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="368.5" cy="174.7" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="368.5" cy="190.193" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="386.3" cy="169.536" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="386.3" cy="183.738" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="404.1" cy="158.561" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="404.1" cy="174.7" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="421.9" cy="152.106" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="421.9" cy="168.244" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="439.7" cy="144.359" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="439.7" cy="161.789" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="457.5" cy="135.321" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="457.5" cy="154.688" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="475.3" cy="130.157" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="475.3" cy="146.941" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="493.1" cy="123.701" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="493.1" cy="137.903" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="510.9" cy="116.6" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="510.9" cy="128.866" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="528.7" cy="107.562" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="528.7" cy="115.954" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="546.5" cy="97.879" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="546.5" cy="104.334" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="564.3" cy="86.259" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="564.3" cy="94.006" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="582.1" cy="77.221" r="4" stroke="#ff6800" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle><circle cx="582.1" cy="94.006" r="4" stroke="#a0a700" stroke-width="2" stroke-opacity="1" fill="#fff" fill-opacity="1"></circle></g></g><g><text style="font:14px Arial,Helvetica,sans-serif;" x="271.5" y="399" stroke="none" fill="#000001" fill-opacity="1">DAY OF MONTH</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="62.89999999999999" y="368" stroke="none" fill="#000001" fill-opacity="1">1</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="80.69999999999999" y="380" stroke="none" fill="#000001" fill-opacity="1">2</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="98.5" y="368" stroke="none" fill="#000001" fill-opacity="1">3</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="116.3" y="380" stroke="none" fill="#000001" fill-opacity="1">4</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="134.1" y="368" stroke="none" fill="#000001" fill-opacity="1">5</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="151.9" y="380" stroke="none" fill="#000001" fill-opacity="1">6</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="169.7" y="368" stroke="none" fill="#000001" fill-opacity="1">7</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="187.5" y="380" stroke="none" fill="#000001" fill-opacity="1">8</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="205.3" y="368" stroke="none" fill="#000001" fill-opacity="1">9</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="220.6" y="380" stroke="none" fill="#000001" fill-opacity="1">10</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="238.9" y="368" stroke="none" fill="#000001" fill-opacity="1">11</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="256.20000000000005" y="380" stroke="none" fill="#000001" fill-opacity="1">12</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="274" y="368" stroke="none" fill="#000001" fill-opacity="1">13</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="291.79999999999995" y="380" stroke="none" fill="#000001" fill-opacity="1">14</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="309.6" y="368" stroke="none" fill="#000001" fill-opacity="1">15</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="327.4" y="380" stroke="none" fill="#000001" fill-opacity="1">16</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="345.20000000000005" y="368" stroke="none" fill="#000001" fill-opacity="1">17</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="363" y="380" stroke="none" fill="#000001" fill-opacity="1">18</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="380.79999999999995" y="368" stroke="none" fill="#000001" fill-opacity="1">19</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="398.6" y="380" stroke="none" fill="#000001" fill-opacity="1">20</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="416.4" y="368" stroke="none" fill="#000001" fill-opacity="1">21</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="434.20000000000005" y="380" stroke="none" fill="#000001" fill-opacity="1">22</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="452" y="368" stroke="none" fill="#000001" fill-opacity="1">23</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="469.79999999999995" y="380" stroke="none" fill="#000001" fill-opacity="1">24</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="487.6" y="368" stroke="none" fill="#000001" fill-opacity="1">25</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="505.4" y="380" stroke="none" fill="#000001" fill-opacity="1">26</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="523.2" y="368" stroke="none" fill="#000001" fill-opacity="1">27</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="541" y="380" stroke="none" fill="#000001" fill-opacity="1">28</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="558.8" y="368" stroke="none" fill="#000001" fill-opacity="1">29</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="576.6" y="380" stroke="none" fill="#000001" fill-opacity="1">30</text></g><g><g><path d="M57.5 59.5 L 57.5 349.5" stroke="#8e8e8e" stroke-width="1" fill="none"></path><path d="M53.5 349.5 L 57.5 349.5" stroke="#8e8e8e" stroke-width="1" fill="none"></path><path d="M53.5 317.5 L 57.5 317.5" stroke="#8e8e8e" stroke-width="1" fill="none"></path><path d="M53.5 284.5 L 57.5 284.5" stroke="#8e8e8e" stroke-width="1" fill="none"></path><path d="M53.5 252.5 L 57.5 252.5" stroke="#8e8e8e" stroke-width="1" fill="none"></path><path d="M53.5 220.5 L 57.5 220.5" stroke="#8e8e8e" stroke-width="1" fill="none"></path><path d="M53.5 188.5 L 57.5 188.5" stroke="#8e8e8e" stroke-width="1" fill="none"></path><path d="M53.5 155.5 L 57.5 155.5" stroke="#8e8e8e" stroke-width="1" fill="none"></path><path d="M53.5 123.5 L 57.5 123.5" stroke="#8e8e8e" stroke-width="1" fill="none"></path><path d="M53.5 91.5 L 57.5 91.5" stroke="#8e8e8e" stroke-width="1" fill="none"></path><path d="M53.5 59.5 L 57.5 59.5" stroke="#8e8e8e" stroke-width="1" fill="none"></path></g></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="42" y="353.5" stroke="none" fill="#232323" fill-opacity="1">0</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="37" y="321.222" stroke="none" fill="#232323" fill-opacity="1">50</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="31" y="288.944" stroke="none" fill="#232323" fill-opacity="1">100</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="31" y="256.667" stroke="none" fill="#232323" fill-opacity="1">150</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="31" y="224.389" stroke="none" fill="#232323" fill-opacity="1">200</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="31" y="192.111" stroke="none" fill="#232323" fill-opacity="1">250</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="31" y="159.833" stroke="none" fill="#232323" fill-opacity="1">300</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="31" y="127.55600000000001" stroke="none" fill="#232323" fill-opacity="1">350</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="31" y="95.278" stroke="none" fill="#232323" fill-opacity="1">400</text></g><g><text style="font:10px Arial,Helvetica,sans-serif;" x="31" y="63" stroke="none" fill="#232323" fill-opacity="1">450</text></g><g transform="matrix(0,-1,1,0,-191.25,263.75)"><text style="font:14px Arial,Helvetica,sans-serif;" x="10" y="209.25" stroke="none" fill="#232323" fill-opacity="1"># OF VESSELS</text></g></g><g><g><text style="font:24px Arial,Helvetica,sans-serif;" x="219.5" y="37" stroke="none" fill="#8e8e8e" fill-opacity="1">All Movements</text></g></g><g></g><g><g><g transform="matrix(1,0,0,1,507,10)"><path d="M1 3.5 L 8 3.5 8 10.5 1 10.5Z" stroke="#ff6800" stroke-width="1" fill="#ff6800"></path><g><text style="font:12px Arial,Helvetica,sans-serif;" x="15" y="11" stroke="none" fill="#232323" fill-opacity="1">This Month</text></g><path style="cursor:pointer;" d="M0 0 L 75 0 75 14 0 14Z" stroke="none" fill="#fff" fill-opacity="0"></path></g><g transform="matrix(1,0,0,1,507,24)"><path d="M1 3.5 L 8 3.5 8 10.5 1 10.5Z" stroke="#a0a700" stroke-width="1" fill="#a0a700"></path><g><text style="font:12px Arial,Helvetica,sans-serif;" x="15" y="11" stroke="none" fill="#232323" fill-opacity="1">Last Month</text></g><path style="cursor:pointer;" d="M0 0 L 75 0 75 14 0 14Z" stroke="none" fill="#fff" fill-opacity="0"></path></g></g></g><g></g></g></svg>
我想从这个svg创建一个img。我一直在测试这个功能：
function beforePDFPrinting() {
var cc = $('svg');
for (i = 0; i < cc.length; i++) {
var svg = cc[i];
var img = new Image();
img.crossOrigin = "Anonymous";
img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg.outerHTML)));
img.style = "width:'100%';height:'100%';";
img.className = "remove-after-print";
svg.parentNode.insertBefore(img, svg);
svg.parentNode.removeChild(svg);
}
}
...但它不适用于IE。 你能告诉我我该怎么做才能使它在IE上运行。提前谢谢。
答案 0 :(得分：1)
如果你使用canvg js，你可以这样做;首先将svg导出到画布，然后从画布中获取img。
您需要包含以下链接：
<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js"></script>
然后你的功能将是：
function beforePDFPrinting() {
var cc = $('svg');
for (var index = 0; index < cc.length; index++) {
var svg = cc[index];
svg.setAttribute("width", svg.parentNode.clientWidth);
svg.setAttribute("height", svg.parentNode.clientHeight);
var svgText = svg.parentNode.innerHTML.replace(/\r?\n|\r/g, '').trim();
//get the canvas
$('body').append('<canvas width="' + svg.parentNode.clientWidth + '" height="' + svg.parentNode.clientHeight + '" id="thecanvas' + index + '"></canvas>')
var canvas = document.getElementById("thecanvas" + index);
canvg(canvas, svgText,
{
ignoreDimensions: true,
scaleWidth: svg.parentNode.clientWidth,
scaleHeight: svg.parentNode.clientHeight,
})
var img = new Image();
img.src = canvas.toDataURL();
img.className = "remove-after-print";
svg.parentNode.insertBefore(img, svg);
canvas.parentNode.removeChild(canvas);
svg.parentNode.removeChild(svg);
}
}
你也可以添加一些样式（在这种情况下我不得不）：
<style>
.remove-after-print {
width: 100%;
height: 100%;
}
</style>