Phantom JS没有捕获clipPath并从svg

时间:2018-06-07 10:55:52

标签: javascript html css svg phantomjs

我有一个代码,用于在SVG下定义剪辑路径,然后通过URL引用组元素中的剪辑路径,但在使用Phantom JS截取屏幕截图时会忽略剪辑路径:

Phantom JS 1.9.8版和我使用的脚本

var webPage = require('webpage');
var page = webPage.create();
var system = require("system");
page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36';
page.viewportSize = { width: 1150, height: 900 };

page.open(system.args[1], function start(status) {
    window.setTimeout(function () {
        page.render(system.args[2], {format: 'png', quality: '80'});
        phantom.exit();
    }, 3000);
});

我无法在此发布完整的SVG代码,我刚刚发布了使用剪辑路径并做出反应的部分

<g id="inset">
<polygon class="st3" points="4.5,113.4 56.4,113.4 56.4,180.2 26.6,180.2 31.6,191 17.8,180.2 4.5,180.2   "></polygon>
<g>
    <path class="st4" d="M9.6,119.9H8.8v-3.7h0.8V119.9z"></path>
    <path class="st4" d="M13.4,119.9h-0.8l-1.5-2.4v2.4h-0.8v-3.7h0.8l1.5,2.4v-2.4h0.8V119.9z"></path>
    <path class="st4" d="M17.1,118.7c0,0.4-0.2,0.7-0.4,0.9c-0.3,0.2-0.6,0.3-1,0.3c-0.5,0-0.8-0.2-1.1-0.5s-0.4-0.8-0.4-1.3V118
        c0-0.4,0.1-0.7,0.2-0.9c0.1-0.3,0.3-0.5,0.5-0.6c0.2-0.1,0.5-0.2,0.8-0.2c0.4,0,0.8,0.1,1,0.3c0.3,0.2,0.4,0.5,0.5,1h-0.8
        c0-0.2-0.1-0.4-0.2-0.5c-0.1-0.1-0.3-0.2-0.5-0.2c-0.3,0-0.4,0.1-0.6,0.3c-0.1,0.2-0.2,0.5-0.2,0.8v0.3c0,0.4,0.1,0.7,0.2,0.9
        c0.1,0.2,0.3,0.3,0.6,0.3c0.2,0,0.4-0.1,0.5-0.2c0.1-0.1,0.2-0.3,0.2-0.5H17.1z"></path>
    <path class="st4" d="M18.5,119.3h1.6v0.6h-2.4v-3.7h0.8V119.3z"></path>
    <path class="st4" d="M21.5,119.9h-0.8v-3.7h0.8V119.9z"></path>
    <path class="st4" d="M25.3,119.9h-0.8l-1.5-2.4v2.4h-0.8v-3.7h0.8l1.5,2.4v-2.4h0.8V119.9z"></path>
    <path class="st4" d="M28.3,118.3h-1.5v1h1.7v0.6h-2.5v-3.7h2.5v0.6h-1.7v0.9h1.5V118.3z"></path>
    <path class="st4" d="M31.9,119l0.8-2.8h0.8l-1.3,3.7h-0.8l-1.3-3.7h0.8L31.9,119z"></path>
    <path class="st4" d="M34.9,119.9h-0.8v-3.7h0.8V119.9z"></path>
    <path class="st4" d="M36.5,119.3h1.6v0.6h-2.4v-3.7h0.8V119.3z"></path>
    <path class="st4" d="M39.4,119.3H41v0.6h-2.4v-3.7h0.8V119.3z"></path>
    <path class="st4" d="M43.7,119.2h-1.3l-0.3,0.8h-0.8l1.4-3.7h0.7l1.4,3.7H44L43.7,119.2z M42.6,118.6h0.9l-0.5-1.4L42.6,118.6z"></path>
    <path class="st4" d="M48.1,119.5c-0.1,0.2-0.3,0.3-0.6,0.4c-0.2,0.1-0.5,0.1-0.8,0.1c-0.3,0-0.6-0.1-0.8-0.2
        c-0.2-0.1-0.4-0.3-0.6-0.6c-0.1-0.3-0.2-0.6-0.2-0.9V118c0-0.4,0.1-0.7,0.2-1s0.3-0.5,0.5-0.6c0.2-0.1,0.5-0.2,0.8-0.2
        c0.4,0,0.8,0.1,1,0.3c0.2,0.2,0.4,0.5,0.4,0.9h-0.7c0-0.2-0.1-0.4-0.2-0.5c-0.1-0.1-0.3-0.1-0.5-0.1c-0.3,0-0.5,0.1-0.6,0.3
        c-0.1,0.2-0.2,0.5-0.2,0.9v0.2c0,0.4,0.1,0.7,0.2,0.9c0.1,0.2,0.4,0.3,0.6,0.3c0.3,0,0.5-0.1,0.6-0.2v-0.6h-0.7V118h1.5V119.5z"></path>
    <path class="st4" d="M51.1,118.3h-1.5v1h1.7v0.6h-2.5v-3.7h2.5v0.6h-1.7v0.9h1.5V118.3z"></path>
</g>
<g>
    <g>
        <rect x="6.4" y="122.2" class="st5" width="48.1" height="55.8"></rect>
        <path class="st4" d="M54.2,122.5v55.2H6.8v-55.2H54.2 M54.8,121.9h-0.7H6.8H6.1v0.7v55.2v0.7h0.7h47.4h0.7v-0.7v-55.2V121.9
            L54.8,121.9z"></path>
    </g>
    <rect x="6.8" y="155.6" class="st6" width="36" height="22"></rect>
    <g>
        <defs>
            <rect id="SVGID_3_" x="6.8" y="122.5" width="47.4" height="55.2"></rect>
        </defs>
        <clipPath id="SVGID_4_">
            <use xlink:href="#SVGID_3_"></use>
        </clipPath>
        <g class="st7" clip-path="url(#SVGID_4_)">
            <g>
                <g>
                    <path id="89451" data-id="89451" class="st0" d="M56.9,193.2l-0.5-2.6l-3.4-2.1l-1.8-2.8l-0.7-1.5l-1.5,0.8l-1.7-1.6l-0.9-3l2.2-8.1l1.8-1.6l1.7-4.2
                        l-0.5-1.8l-3.4-1.9l1.8-6.9l0.1-7.6l1.2-1.5l-0.5-2.1l-1.5-1.8l3.2-2.8l0.4-1.5l-0.6-0.5l-0.2-3.7l-0.7-0.2l0.2-0.9l-2.2-1.5
                        l-7.2,0.7l-2.5-0.5c0,0,1.5-2,1.5-2.3c0-0.3,1.3-2.8,1.5-3.2c-0.1,0.1-0.2,0.2-0.2,0.2l-0.1-1.9l-7.8-0.1c0,0,0.1,3.2-0.1,3.5
                        c-0.1,0.4,0.1,0.5,0.1,0.5l0.1,5.6h-8l-0.1,7.9l-20.7,0.2l0.2,27.4c0,0,0.3,0.3,0.6,0.5c0.3,0.2,1,1.2,1.3,0.2
                        c0.3-1.1,0.3-3.5,0.5-4c0.2-0.5-0.2-2.2-0.2-2.2s0.2-0.5,0.2-0.7c0-0.2,0.5-2.1,0.5-2.1s0.5-0.8,0.4-1.3
                        c-0.1-0.5-0.2-0.5-0.1-1c0.2-0.5,0.7-1.9,0.8-2.2c0.2-0.3,0.9-1.4,1.8-1.5c0.9-0.1,2.5,0.2,3.5,0.3s1.2,0.5,1.7,0.5
                        c0.5-0.1,1.1-0.4,1.6-0.3c0.5,0.1,1.6,0.5,2.2,1c0.5,0.5,0.3,0.8,0.9,1c0.6,0.2,0.5,0.5,1.2,0.5s1.2-0.2,1.7,0.2
                        c0.5,0.3,2.5,1.1,3.4,1.3s4.9,2.6,4.9,2.6s1.2,0.7,1.6,1.2c0.5,0.5,0.3,0.7,1.3,1.2c1,0.5,0.6,1.6,0.3,2.1
                        c-0.3,0.5-0.2,0.8-0.2,1.2c0.1,0.4-0.1,1.4,0.2,1.3c0.2-0.1,0.6,0,0.8,0.3c0.2,0.3,0.4,0.3,0.9,0.6c0.5,0.3,0.1,0.8,0.1,1.2
                        c0,0.3,0.4,0.6-0.1,1.4c-0.5,0.8-0.2,0.8-0.2,1.6c0.1,0.8-0.2,1.1-0.5,1.6c-0.4,0.5,0.2,0.8,0.2,1.4c0,0.5,0.1,0.7-0.4,0.8
                        c-0.5,0.2-0.4,0.5-0.2,1.1c0.2,0.5,0.3,0.8,0.3,1.2c0,0.5,0.4,0.6-0.5,0.6s0,0.5-0.3,0.8c-0.3,0.4-0.6,0.1-0.6,0.8
                        c0,0.8-0.2,1.3,0.5,1.1c0.8-0.2,1.4-0.1,1.8,0.6c0.4,0.7,0.4,1.9,0.4,2.9c0,1-0.8,2.2-0.3,2.8c0.5,0.6,0.3,1.3,0.6,1.8
                        c0.3,0.5,0.1,1.2,0.1,1.2s-0.6,0.5-0.6,0.9c0,0.4-0.4,0.2-0.6,0.2c-0.2,0-1.5,0.2-1.5,0.8s0.4,0.5-0.2,2.2
                        c-0.5,1.6-0.4,2.7-0.4,2.7l22.2,0.2l-0.8-0.6l-0.2-4.5l1.8-1.9H56.9z" style="fill: rgb(233, 247, 225);" color-default="#E9F7E1"></path>
                </g>
            </g>
            <g>
                <path class="st8" d="M48.2,117.7c0.4-0.4,1.5-1.6,2.4-0.6c0.4,0.4,0.9,0.9,0.8,1.6c-0.1,0.7-0.9,1-1.2,1.1
                    c-1.2,0.5-2.1,1.1-2.1,1.1l-0.5,0.3l-0.2-0.3c-0.2,0-0.5,0.2-1.2,0.7c-0.9,0.7-1.1,0.8-1.2,0.8c-0.1,0-0.2,0.2-0.4,0.4
                    c-0.5,0.5-1.1,0.7-1.5,0.9c-0.5,0.2-0.7,0.3-0.8,0.5c-0.2,0.6-0.6,0.8-0.9,1.1c-0.3,0.2-0.3,0.3-0.3,0.5c0,1.2,0,1.5-0.6,2.8
                    c0,0,0,0,0,0c0.1,0.3-0.1,0.6-0.6,1.4c-0.3,0.5-0.4,0.8-0.4,1.1c-0.1,0.9-0.4,1.3-1.9,2.1c-0.9,0.4-1.5,0.3-2,0.2
                    c0,0.1,0,0.2,0,0.3c0.1,1.2,0.1,2.1,0.1,2.7c0,1,0,1.4,0.3,2c0.3,0.7,0.3,1.3,0.3,1.9c0,0.6,0,0.8,0.3,1.1
                    c0.1,0.1,0.2,0.2,0.3,0.3c0.6,0.5,0.8,0.8,1,1.9c0,0.2,0.1,0.5,0.1,0.6c0.1,0.6,0.4,1.6-0.8,1.9c-0.9,0.2-1.4-0.8-1.9-1.7
                    c-0.1-0.3-0.3-0.6-0.4-0.8c-0.7-0.3-1.8-1.6-2.4-2.4l-0.1-0.1l0-0.1c-0.1-0.4-0.7-1.4-1.5-1.7c-0.4-0.1-0.9,0-1.5,0.3
                    c-0.4,0.7-1,1.8-1.2,2.1c-0.1,0.4-0.3,1.4-0.3,1.9l-0.1,0.4l-0.4,0.1c0,0-1,0.3-1.2,1.1c-0.1,0.3-0.1,0.6-0.2,0.9
                    c-0.1,0.7-0.2,1.5-1.2,2.2c-0.3,0.2-0.4,0.3-0.6,0.4c-0.4,0.3-0.6,0.4-1.9,0.9c-0.5,0.2-0.9,0.3-1.3,0.4
                    c-1.1,0.3-1.4,0.4-1.5,1.2l-1.3-0.1c0.2-1.7,1.2-2,2.4-2.3c0.3-0.1,0.7-0.2,1.2-0.4c1.3-0.5,1.3-0.5,1.6-0.8
                    c0.1-0.1,0.3-0.2,0.6-0.4c0.5-0.3,0.5-0.7,0.6-1.3c0-0.3,0.1-0.7,0.2-1.1c0.3-1,1.2-1.5,1.7-1.7c0.1-0.5,0.2-1.3,0.3-1.8
                    c0.2-0.6,1.2-2.2,1.3-2.5l0.1-0.1l0.1-0.1c0.9-0.6,1.8-0.8,2.7-0.5c1.4,0.4,2.1,1.9,2.3,2.4c0.7,0.8,1.6,1.8,1.9,1.9
                    c0.5,0.2,0.7,0.7,1.1,1.4c0,0.1,0.1,0.2,0.2,0.4c0-0.2-0.1-0.3-0.1-0.5c-0.1-0.7-0.2-0.8-0.6-1.2c-0.1-0.1-0.2-0.2-0.3-0.3
                    c-0.6-0.6-0.6-1.3-0.6-1.9c0-0.5,0-0.9-0.2-1.4c-0.4-0.9-0.4-1.5-0.4-2.6c0-0.6,0-1.4,0-2.6c-0.1-1.5-0.1-1.8,0.4-2
                    c0.4-0.2,0.8,0.1,0.9,0.2c0.3,0.2,0.7,0.5,1.5,0.1c1.1-0.5,1.1-0.7,1.2-1c0-0.4,0.1-0.9,0.6-1.7c0.1-0.2,0.2-0.3,0.3-0.4
                    c0-0.3,0.1-0.5,0.2-0.8c0.5-1.2,0.5-1.3,0.5-2.3c0-1,0.5-1.3,0.9-1.6c0.2-0.2,0.4-0.3,0.5-0.5c0.3-0.8,0.9-1,1.5-1.2
                    c0.4-0.2,0.7-0.3,1.1-0.6c0.5-0.5,0.5-0.5,0.7-0.6c0.1,0,0.2-0.1,1-0.7c1-0.7,1.7-1.1,2.3-1c0,0,0.1,0,0.1,0
                    c0.4-0.2,1.1-0.6,2-1c0.2-0.1,0.3-0.1,0.4-0.2c-0.1-0.1-0.2-0.2-0.3-0.4c-0.2,0-0.8,0.5-1.4,0.8h0L48.2,117.7"></path>
            </g>
        </g>
    </g>
</g>

用幻影JS Image Here拍摄截图 Image Here

0 个答案:

没有答案