用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>浏览器展示效果同上面一样
截图效果却是
想知道 怎么让第二种写法的截图也显示图片 以及为什么会这样。
先谢了
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论