【问题标题】:Unable to get correct image when converting SVG to PNG using Imagick使用 Imagick 将 SVG 转换为 PNG 时无法获得正确的图像
【发布时间】:2014-03-10 15:25:11
【问题描述】:

我有由svg.js 库生成的 SVG HTML 代码。使用 PHP 的 Imagick 我想将 SVG HTML 转换为 PNG。

PHP:

$svg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg id="SvgjsSvg2552" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1500" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="SvgjsG2676"><g id="SvgjsG2554"><g id="SvgjsG2555"><g id="SvgjsG2556"><g id="SvgjsG2557"><path id="SvgjsPath2558" d="M665 100L665 167.0881805419922 " stroke-opacity="1" stroke="#000000" stroke-width="0.1" fill="none"></path><path id="SvgjsPath2559" d="M715 100L715 176.7947235107422 " stroke-opacity="1" stroke="#a80fa8" stroke-width="10" fill="none"></path></g><g id="SvgjsG2560"><path id="SvgjsPath2561" d="M565 85L565 176.7947235107422 " stroke-opacity="1" stroke="#000000" stroke-width="23" fill="none"></path><path id="SvgjsPath2562" d="M615 85L615 167.0881805419922 " stroke-opacity="1" stroke="#000000" stroke-width="0.1" fill="none"></path></g></g><g id="SvgjsG2563"><g id="SvgjsG2564" transform="rotate(210 640 429.5)"><path id="SvgjsPath2565" d="M665 100L665 167.0881805419922 " stroke-opacity="1" stroke="#a80fa8" stroke-width="2.3" fill="none"></path><path id="SvgjsPath2566" d="M715 100L715 176.7947235107422 " stroke-opacity="1" stroke="#000000" stroke-width="23" fill="none"></path></g><g id="SvgjsG2567" transform="rotate(210 640 429.5)"><path id="SvgjsPath2568" d="M565 85L565 176.7947235107422 " stroke-opacity="1" stroke="#a80fa8" stroke-width="10" fill="none"></path><path id="SvgjsPath2569" d="M615 85L615 167.0881805419922 " stroke-opacity="1" stroke="#a80fa8" stroke-width="2.3" fill="none"></path></g></g><g id="SvgjsG2570"><g id="SvgjsG2571"><path id="SvgjsPath2572" d="M565 176.7947235107422Q565.4104614257812 408.6929016113281 448.6954650878906 610.8491821289062 " stroke-opacity="1" stroke="#000000" stroke-width="23" fill="none"></path><path id="SvgjsPath2573" d="M615 167.0881805419922A200 200 0 0 0 665 167.0881805419922 " stroke-opacity="1" stroke="#000000" stroke-width="0.1" fill="none"></path></g><g id="SvgjsG2574"><path id="SvgjsPath2575" d="M578.5992431640625 685.8491821289062Q715.380615234375 448.93695068359375 715 176.7947235107422 " stroke-opacity="1" stroke="#a80fa8" stroke-width="10" fill="none"></path><path id="SvgjsPath2576" d="M530.4447021484375 669.2553100585938A200 200 0 0 0 487.1434631347656 644.2553100585938 " stroke-opacity="1" stroke="#a80fa8" stroke-width="2.3" fill="none"></path></g></g></g><g id="SvgjsG2577"><g id="SvgjsG2578" transform="translate(540 25)"><g id="SvgjsG2579"><rect id="SvgjsRect2580" width="200" height="15" fill="none" stroke-width="0"></rect><text id="SvgjsText2581" font-family="arial" x="100" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="SvgjsTspan2582" dy="0.9em" x="100">1</tspan></text></g><g id="SvgjsG2583" transform="translate(0 15)"><g id="SvgjsG2584"><rect id="SvgjsRect2585" width="200" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2586" font-family="arial" x="100" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="SvgjsTspan2587" dy="0.9em" x="100">352</tspan></text></g></g><g id="SvgjsG2588" transform="translate(0 30)"><g id="SvgjsG2589"><rect id="SvgjsRect2590" width="100" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2591" font-family="arial" x="50" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="SvgjsTspan2592" dy="0.9em" x="50">251</tspan></text></g></g><g id="SvgjsG2593" transform="translate(0 45)"><g id="SvgjsG2594"><g id="SvgjsG2595"><rect id="SvgjsRect2596" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2597" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="SvgjsTspan2598" dy="0.9em" x="25">250</tspan></text></g></g><g id="SvgjsG2599" transform="translate(50 0)"><g id="SvgjsG2600"><rect id="SvgjsRect2601" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2602" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="SvgjsTspan2603" dy="0.9em" x="25">1</tspan></text></g></g></g><g id="SvgjsG2604" transform="translate(100 30)"><g id="SvgjsG2605"><rect id="SvgjsRect2606" width="100" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2607" font-family="arial" x="50" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="SvgjsTspan2608" dy="0.9em" x="50">101</tspan></text></g></g><g id="SvgjsG2609" transform="translate(100 45)"><g id="SvgjsG2610"><g id="SvgjsG2611"><rect id="SvgjsRect2612" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2613" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="SvgjsTspan2614" dy="0.9em" x="25">1</tspan></text></g></g><g id="SvgjsG2615" transform="translate(50 0)"><g id="SvgjsG2616"><rect id="SvgjsRect2617" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2618" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="SvgjsTspan2619" dy="0.9em" x="25">100</tspan></text></g></g></g><g id="SvgjsG2620" transform="translate(0 60)"><polygon id="SvgjsPolygon2621" points="0,0 50,15 100,0" fill="#000000" stroke="#" stroke-width="0.1"></polygon></g><g id="SvgjsG2622" transform="translate(100 60)"><polygon id="SvgjsPolygon2623" points="0,15 50,0 100,15" fill="#000000" stroke="#000000" stroke-width="0.1"></polygon></g><g id="SvgjsG2624" transform="translate(0 75)"></g></g><g id="SvgjsG2627" transform="rotate(210 640 429.5) translate(540 25)"><g id="SvgjsG2628"><rect id="SvgjsRect2629" width="200" height="15" fill="none" stroke-width="0"></rect><text id="SvgjsText2630" font-family="arial" x="100" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 100 7.6015625)"><tspan id="SvgjsTspan2631" dy="0.9em" x="100">2</tspan></text></g><g id="SvgjsG2632" transform="translate(0 15)"><g id="SvgjsG2633"><rect id="SvgjsRect2634" width="200" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2635" font-family="arial" x="100" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 100 7.6015625)"><tspan id="SvgjsTspan2636" dy="0.9em" x="100">396</tspan></text></g></g><g id="SvgjsG2637" transform="translate(0 30)"><g id="SvgjsG2638"><rect id="SvgjsRect2639" width="100" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2640" font-family="arial" x="50" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 50 7.6015625)"><tspan id="SvgjsTspan2641" dy="0.9em" x="50">123</tspan></text></g></g><g id="SvgjsG2642" transform="translate(0 45)"><g id="SvgjsG2643"><g id="SvgjsG2644"><rect id="SvgjsRect2645" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2646" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 25 7.6015625)"><tspan id="SvgjsTspan2647" dy="0.9em" x="25">100</tspan></text></g></g><g id="SvgjsG2648" transform="translate(50 0)"><g id="SvgjsG2649"><rect id="SvgjsRect2650" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2651" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 25 7.6015625)"><tspan id="SvgjsTspan2652" dy="0.9em" x="25">23</tspan></text></g></g></g><g id="SvgjsG2653" transform="translate(100 30)"><g id="SvgjsG2654"><rect id="SvgjsRect2655" width="100" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2656" font-family="arial" x="50" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 50 7.6015625)"><tspan id="SvgjsTspan2657" dy="0.9em" x="50">273</tspan></text></g></g><g id="SvgjsG2658" transform="translate(100 45)"><g id="SvgjsG2659"><g id="SvgjsG2660"><rect id="SvgjsRect2661" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2662" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 25 7.6015625)"><tspan id="SvgjsTspan2663" dy="0.9em" x="25">23</tspan></text></g></g><g id="SvgjsG2664" transform="translate(50 0)"><g id="SvgjsG2665"><rect id="SvgjsRect2666" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2667" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 25 7.6015625)"><tspan id="SvgjsTspan2668" dy="0.9em" x="25">250</tspan></text></g></g></g><g id="SvgjsG2669" transform="translate(0 60)"><polygon id="SvgjsPolygon2670" points="0,0 50,15 100,0" fill="#000000" stroke="#a80fa8" stroke-width="0.1"></polygon></g><g id="SvgjsG2671" transform="translate(100 60)"><polygon id="SvgjsPolygon2672" points="0,15 50,0 100,15" fill="#000000" stroke="#000000" stroke-width="0.1"></polygon></g><g id="SvgjsG2673" transform="translate(0 75)"></g></g></g></g></g><g id="SvgjsG2677" transform="rotate(120 1195 47.5) translate(1180 10)"><polygon id="SvgjsPolygon2678" points="15,0 7.5,15 22.5,15" fill="#000000" stroke="#000000" stroke-width="0.1"></polygon><ellipse id="SvgjsEllipse2679" rx="15" ry="15" cx="15" cy="45" fill="none" stroke="#000000" stroke-width="1"></ellipse><path id="SvgjsPath2680" d="M15 15L15 75 " stroke="#000000" stroke-width="1"></path></g></svg>';
    $imagick = new \Imagick();
    $imagick->readimageblob($svg);
    $imagick->setimageformat('png32');
    $imagick->writeimage(WWW_DIR . '/files/12.png');
    $imagick->clear();
    $imagick->destroy();

SVG:

<svg id="SvgjsSvg2552" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1500" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="SvgjsG2676"><g id="SvgjsG2554"><g id="SvgjsG2555"><g id="SvgjsG2556"><g id="SvgjsG2557"><path id="SvgjsPath2558" d="M665 100L665 167.0881805419922 " stroke-opacity="1" stroke="#000000" stroke-width="0.1" fill="none"></path><path id="SvgjsPath2559" d="M715 100L715 176.7947235107422 " stroke-opacity="1" stroke="#a80fa8" stroke-width="10" fill="none"></path></g><g id="SvgjsG2560"><path id="SvgjsPath2561" d="M565 85L565 176.7947235107422 " stroke-opacity="1" stroke="#000000" stroke-width="23" fill="none"></path><path id="SvgjsPath2562" d="M615 85L615 167.0881805419922 " stroke-opacity="1" stroke="#000000" stroke-width="0.1" fill="none"></path></g></g><g id="SvgjsG2563"><g id="SvgjsG2564" transform="rotate(210 640 429.5)"><path id="SvgjsPath2565" d="M665 100L665 167.0881805419922 " stroke-opacity="1" stroke="#a80fa8" stroke-width="2.3" fill="none"></path><path id="SvgjsPath2566" d="M715 100L715 176.7947235107422 " stroke-opacity="1" stroke="#000000" stroke-width="23" fill="none"></path></g><g id="SvgjsG2567" transform="rotate(210 640 429.5)"><path id="SvgjsPath2568" d="M565 85L565 176.7947235107422 " stroke-opacity="1" stroke="#a80fa8" stroke-width="10" fill="none"></path><path id="SvgjsPath2569" d="M615 85L615 167.0881805419922 " stroke-opacity="1" stroke="#a80fa8" stroke-width="2.3" fill="none"></path></g></g><g id="SvgjsG2570"><g id="SvgjsG2571"><path id="SvgjsPath2572" d="M565 176.7947235107422Q565.4104614257812 408.6929016113281 448.6954650878906 610.8491821289062 " stroke-opacity="1" stroke="#000000" stroke-width="23" fill="none"></path><path id="SvgjsPath2573" d="M615 167.0881805419922A200 200 0 0 0 665 167.0881805419922 " stroke-opacity="1" stroke="#000000" stroke-width="0.1" fill="none"></path></g><g id="SvgjsG2574"><path id="SvgjsPath2575" d="M578.5992431640625 685.8491821289062Q715.380615234375 448.93695068359375 715 176.7947235107422 " stroke-opacity="1" stroke="#a80fa8" stroke-width="10" fill="none"></path><path id="SvgjsPath2576" d="M530.4447021484375 669.2553100585938A200 200 0 0 0 487.1434631347656 644.2553100585938 " stroke-opacity="1" stroke="#a80fa8" stroke-width="2.3" fill="none"></path></g></g></g><g id="SvgjsG2577"><g id="SvgjsG2578" transform="translate(540 25)"><g id="SvgjsG2579"><rect id="SvgjsRect2580" width="200" height="15" fill="none" stroke-width="0"></rect><text id="SvgjsText2581" font-family="arial" x="100" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="SvgjsTspan2582" dy="0.9em" x="100">1</tspan></text></g><g id="SvgjsG2583" transform="translate(0 15)"><g id="SvgjsG2584"><rect id="SvgjsRect2585" width="200" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2586" font-family="arial" x="100" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="SvgjsTspan2587" dy="0.9em" x="100">352</tspan></text></g></g><g id="SvgjsG2588" transform="translate(0 30)"><g id="SvgjsG2589"><rect id="SvgjsRect2590" width="100" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2591" font-family="arial" x="50" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="SvgjsTspan2592" dy="0.9em" x="50">251</tspan></text></g></g><g id="SvgjsG2593" transform="translate(0 45)"><g id="SvgjsG2594"><g id="SvgjsG2595"><rect id="SvgjsRect2596" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2597" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="SvgjsTspan2598" dy="0.9em" x="25">250</tspan></text></g></g><g id="SvgjsG2599" transform="translate(50 0)"><g id="SvgjsG2600"><rect id="SvgjsRect2601" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2602" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="SvgjsTspan2603" dy="0.9em" x="25">1</tspan></text></g></g></g><g id="SvgjsG2604" transform="translate(100 30)"><g id="SvgjsG2605"><rect id="SvgjsRect2606" width="100" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2607" font-family="arial" x="50" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="SvgjsTspan2608" dy="0.9em" x="50">101</tspan></text></g></g><g id="SvgjsG2609" transform="translate(100 45)"><g id="SvgjsG2610"><g id="SvgjsG2611"><rect id="SvgjsRect2612" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2613" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="SvgjsTspan2614" dy="0.9em" x="25">1</tspan></text></g></g><g id="SvgjsG2615" transform="translate(50 0)"><g id="SvgjsG2616"><rect id="SvgjsRect2617" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2618" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000"><tspan id="SvgjsTspan2619" dy="0.9em" x="25">100</tspan></text></g></g></g><g id="SvgjsG2620" transform="translate(0 60)"><polygon id="SvgjsPolygon2621" points="0,0 50,15 100,0" fill="#000000" stroke="#" stroke-width="0.1"></polygon></g><g id="SvgjsG2622" transform="translate(100 60)"><polygon id="SvgjsPolygon2623" points="0,15 50,0 100,15" fill="#000000" stroke="#000000" stroke-width="0.1"></polygon></g><g id="SvgjsG2624" transform="translate(0 75)"></g></g><g id="SvgjsG2627" transform="rotate(210 640 429.5) translate(540 25)"><g id="SvgjsG2628"><rect id="SvgjsRect2629" width="200" height="15" fill="none" stroke-width="0"></rect><text id="SvgjsText2630" font-family="arial" x="100" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 100 7.6015625)"><tspan id="SvgjsTspan2631" dy="0.9em" x="100">2</tspan></text></g><g id="SvgjsG2632" transform="translate(0 15)"><g id="SvgjsG2633"><rect id="SvgjsRect2634" width="200" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2635" font-family="arial" x="100" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 100 7.6015625)"><tspan id="SvgjsTspan2636" dy="0.9em" x="100">396</tspan></text></g></g><g id="SvgjsG2637" transform="translate(0 30)"><g id="SvgjsG2638"><rect id="SvgjsRect2639" width="100" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2640" font-family="arial" x="50" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 50 7.6015625)"><tspan id="SvgjsTspan2641" dy="0.9em" x="50">123</tspan></text></g></g><g id="SvgjsG2642" transform="translate(0 45)"><g id="SvgjsG2643"><g id="SvgjsG2644"><rect id="SvgjsRect2645" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2646" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 25 7.6015625)"><tspan id="SvgjsTspan2647" dy="0.9em" x="25">100</tspan></text></g></g><g id="SvgjsG2648" transform="translate(50 0)"><g id="SvgjsG2649"><rect id="SvgjsRect2650" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2651" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 25 7.6015625)"><tspan id="SvgjsTspan2652" dy="0.9em" x="25">23</tspan></text></g></g></g><g id="SvgjsG2653" transform="translate(100 30)"><g id="SvgjsG2654"><rect id="SvgjsRect2655" width="100" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2656" font-family="arial" x="50" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 50 7.6015625)"><tspan id="SvgjsTspan2657" dy="0.9em" x="50">273</tspan></text></g></g><g id="SvgjsG2658" transform="translate(100 45)"><g id="SvgjsG2659"><g id="SvgjsG2660"><rect id="SvgjsRect2661" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2662" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 25 7.6015625)"><tspan id="SvgjsTspan2663" dy="0.9em" x="25">23</tspan></text></g></g><g id="SvgjsG2664" transform="translate(50 0)"><g id="SvgjsG2665"><rect id="SvgjsRect2666" width="50" height="15" fill="none" stroke="#000000" stroke-width="0.2"></rect><text id="SvgjsText2667" font-family="arial" x="25" y="0" text-anchor="middle" font-size="14px" font-stretch="narrower" fill="#000000" transform="rotate(180 25 7.6015625)"><tspan id="SvgjsTspan2668" dy="0.9em" x="25">250</tspan></text></g></g></g><g id="SvgjsG2669" transform="translate(0 60)"><polygon id="SvgjsPolygon2670" points="0,0 50,15 100,0" fill="#000000" stroke="#a80fa8" stroke-width="0.1"></polygon></g><g id="SvgjsG2671" transform="translate(100 60)"><polygon id="SvgjsPolygon2672" points="0,15 50,0 100,15" fill="#000000" stroke="#000000" stroke-width="0.1"></polygon></g><g id="SvgjsG2673" transform="translate(0 75)"></g></g></g></g></g><g id="SvgjsG2677" transform="rotate(120 1195 47.5) translate(1180 10)"><polygon id="SvgjsPolygon2678" points="15,0 7.5,15 22.5,15" fill="#000000" stroke="#000000" stroke-width="0.1"></polygon><ellipse id="SvgjsEllipse2679" rx="15" ry="15" cx="15" cy="45" fill="none" stroke="#000000" stroke-width="1"></ellipse><path id="SvgjsPath2680" d="M15 15L15 75 " stroke="#000000" stroke-width="1"></path></g></svg>

这就是我得到的。左边的图片(取自浏览器)是一个想要的状态。魔术没有发生:)

我已经尝试过更简单的 SVG HTML 代码,并且成功了。生成的 SVG HTML 代码有什么问题吗?我已经验证了生成的 SVG,没有发现任何错误。

非常感谢。

【问题讨论】:

  • 如果可能,您可以直接在浏览器中将 SVG 转换为图像。这里有一些 ruff 示例代码,你可以看看:gist.github.com/otm/379a3cdb572ac81d8c19
  • 感谢您的评论。我已经尝试过了,但出现了奇怪的错误:Uncaught ReferenceError: text is not defined VM402:1。我不知道VM402:1 是什么。谷歌也没有找到它。我需要任何特殊的,例如JS,图书馆?
  • 请拨弄一下,“VM”错误来自浏览器。例子是 Native JS,所以不需要库。
  • 这是一个更新的小提琴:jsfiddle.net/ErG8h/1我会尽快写出正确的答案。
  • stackoverflow上有一个例子,不过我没试过,请查看stackoverflow.com/questions/13198131/…

标签: javascript php svg imagemagick svg.js


【解决方案1】:

到目前为止,导出 svg 的最佳方式是使用 Inkscape 可执行文件。过去五年我们一直在生产中使用它,它坚如磐石。在 Mac 上,我们像这样使用 Inkscape 来导出 png:

/Applications/Inkscape.app/Contents/Resources/script filename.svg --export-png=filename.png

我们已经测试了很多 svg 解析器,但没有一个能像 Inkscape 那样出色。与svg export pluginsvg.js 一起使用,效果非常好。

【讨论】:

  • 非常感谢您的回复。我正在使用 Inkscape,并且必须同意它现在是我找到的最佳选择。但是文本垂直位置存在一个问题。希望我可以使用带有一些“仅导出规则”的导出插件来修复它。
  • 这已经可以通过使用exportAttr() 方法来实现。这将仅在导出时修改定义的属性:github.com/wout/svg.export.js#export-attributes
  • 是的,我通过说“仅出口”来指出这一点 :) 但现在对我来说还有一件事很重要。如何导出image documentup.com/wout/svg.js#image?我需要指定绝对路径吗?
  • 是的,您必须使用xlink:href="/absolute/path/to/image.jpg" 导出。
【解决方案2】:

您遇到的问题是 ImageMagick 的内部 SVG 子流程不完全支持的相关 SVG 1.1 功能。特别是font-stretch="narrower" 属性和g 元素的嵌套路径分组。最好的解决方法是安装 RSVG 委托并通过运行以下命令进行确认...

identify -list format
# or
identify -list delegate

另一种选择是重新评估生成 SVG 的方式。 svg.js 之类的工具既简单又轻便,但生成的输出可能非常复杂,包含不必要的元素和转换。 ImageMagick 还支持SVG path specs。您也许可以直接在 PHP-Imagick 中生成图像。

【讨论】:

  • 感谢回复。我已经阅读了有关 RSVG 委托的信息,但还没有找到如何在 Windows 上安装它的教程,只有这个链接 cairographics.org/download。为了“缓解”我的 SVG,我必须摆脱 font-stretch 和嵌套组?
  • 我已经在我的Windows机器上安装了Python RSVGgithub.com/jmcb/python-rsvg-dependencies,但是使用convert -list format仍然有SVG SVG rw+ Scalable Vector Graphics (XML 2.9.0)
猜你喜欢
  • 1970-01-01
  • 2022-10-05
  • 2016-03-12
  • 2019-05-23
  • 1970-01-01
  • 2011-06-16
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多