用phantomJs 把svg转成png

两种svg写法,浏览器里显示效果一样,截出来的图不一样,求解

第一种

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="644px" height="280px" viewBox="0 0 644 280" enable-background="new 0 0 644 280" xml:space="preserve">
    <rect x="13.441" y="98.35" fill="none" stroke="#050101" stroke-miterlimit="10" width="202.5" height="175"/>
    <image overflow="visible" width="190" height="166" xlink:href="https://img6.bdstatic.com/img/image/smallpic/chongwu1014.jpg" transform="matrix(1.0658 0 0 1.0542 13.4408 98.35)">
    </image>
</svg>
</body>
</html>

浏览器展示效果
浏览器展示效果

截图效果同上面浏览器一样

第二种方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="644px" height="280px" viewBox="0 0 644 280" enable-background="new 0 0 644 280" xml:space="preserve">
    <rect x="13.441" y="98.35" fill="url(#pattern)" stroke="#050101" stroke-miterlimit="10" width="202.5" height="175"/>
    <defs>
        <pattern id="pattern" width="202" height="175" x="13.4408" y="98.35" patternUnits="userSpaceOnUse">
            <image width="202" height="175" href="https://img6.bdstatic.com/img/image/smallpic/chongwu1014.jpg"></image>
        </pattern>
    </defs>
</svg>
</body>
</html>

浏览器展示效果同上面一样

截图效果却是
截图效果

想知道 怎么让第二种写法的截图也显示图片 以及为什么会这样。
先谢了

阅读 3.7k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题