两种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>
浏览器展示效果同上面一样
截图效果却是
想知道 怎么让第二种写法的截图也显示图片 以及为什么会这样。
先谢了
付费偷看金额在0.1-10元之间
一周热门 更多>