我是否对SVG文件使用,或?</p> html HTML 神乐Tony阿飞 2020-03-18 </div> 我应该使用<img>,<object>或<embed>用于加载SVG文件插入到页面的方式类似于加载jpg,gif还是png? 每个代码分别是什么以确保其正常工作?(在我的研究中,我看到了关于包含模仿类型或指向后备SVG渲染器的参考,但是没有看到一个很好的最新参考)。 假设我正在用Modernizr检查SVG支持,然后退回(可能是用一个普通<img>标签进行替换)不支持SVG的浏览器。 </div> 第2062篇《我是否对SVG文件使用,或?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点</p> 共6个回答 逆天Stafan猴子 2020.03.18 我建议结合使用 <svg viewBox="" width="" height=""> <path fill="#xxxxxx" d="M203.3,71.6c-.........."></path> </svg> 西门Pro 2020.03.18 我个人会使用<svg>标签,因为如果您这样做,则可以完全控制它。如果您确实使用它,<img>则不会用CSS等控制SVG的内部。 另一件事是浏览器支持。 只需打开svg文件并将其直接粘贴到模板中即可。 <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3400 2700" preserveAspectRatio="xMidYMid meet" (click)="goHome();"> <g id="layer101"> <path d="M1410 2283 c-162 -225 -328 -455 -370 -513 -422 -579 -473 -654 -486 -715 -7 -33 -50 -247 -94 -475 -44 -228 -88 -448 -96 -488 -9 -40 -14 -75 -11 -78 2 -3 87 85 188 196 165 180 189 202 231 215 25 7 129 34 230 60 100 26 184 48 185 49 4 4 43 197 43 212 0 10 -7 13 -22 9 -13 -3 -106 -25 -208 -49 -102 -25 -201 -47 -221 -51 l-37 -7 8 42 c4 23 12 45 16 49 5 4 114 32 243 62 129 30 240 59 246 66 10 10 30 132 22 139 -1 2 -110 -24 -241 -57 -131 -33 -240 -58 -242 -56 -6 6 13 98 22 107 5 4 135 40 289 80 239 61 284 75 307 98 14 15 83 90 153 167 70 77 132 140 139 140 7 0 70 -63 141 -140 70 -77 137 -150 150 -163 17 -19 81 -39 310 -97 159 -41 292 -78 296 -82 8 -9 29 -106 24 -111 -1 -2 -112 24 -245 58 -134 33 -245 58 -248 56 -6 -7 16 -128 25 -136 5 -4 112 -30 238 -59 127 -29 237 -54 246 -57 11 -3 20 -23 27 -57 6 -28 9 -53 8 -54 -1 -1 -38 7 -81 17 -274 66 -379 90 -395 90 -16 0 -16 -6 3 -102 11 -57 21 -104 22 -106 1 -1 96 -27 211 -57 115 -31 220 -60 234 -66 14 -6 104 -101 200 -211 95 -111 175 -197 177 -192 1 5 -40 249 -91 542 l-94 532 -145 203 c-220 309 -446 627 -732 1030 -143 201 -265 366 -271 367 -6 0 -143 -183 -304 -407z m10 -819 l-91 -161 -209 -52 c-115 -29 -214 -51 -219 -49 -6 1 32 55 84 118 l95 115 213 101 c116 55 213 98 215 94 1 -3 -38 -78 -88 -166z m691 77 l214 -99 102 -123 c56 -68 100 -125 99 -127 -4 -3 -435 106 -447 114 -4 2 -37 59 -74 126 -38 68 -79 142 -93 166 -13 23 -22 42 -20 42 2 0 101 -44 219 -99z"/> <path d="M1126 2474 c-198 -79 -361 -146 -363 -147 -2 -3 -70 -410 -133 -805 -12 -73 -20 -137 -18 -143 2 -6 26 23 54 63 27 40 224 320 437 622 213 302 386 550 385 551 -2 2 -165 -62 -362 -141z"/> <path d="M1982 2549 c25 -35 159 -230 298 -434 139 -203 283 -413 319 -465 37 -52 93 -134 125 -182 59 -87 83 -109 73 -65 -5 20 -50 263 -138 747 -17 91 -36 170 -42 176 -9 8 -571 246 -661 280 -14 6 -7 -10 26 -57z"/> <path d="M1679 1291 c-8 -11 -71 -80 -141 -153 l-127 -134 -95 -439 c-52 -242 -92 -442 -90 -445 6 -5 38 28 218 223 l99 107 154 0 c85 0 163 -4 173 -10 10 -5 78 -79 151 -162 73 -84 136 -157 140 -162 18 -21 18 4 -2 85 -11 46 -58 248 -105 448 l-84 364 -87 96 c-108 121 -183 201 -187 201 -2 0 -10 -9 -17 -19z m96 -488 c33 -102 59 -189 57 -192 -2 -6 -244 -2 -251 4 -5 6 120 375 127 375 4 0 34 -84 67 -187z"/> </g> </svg> 然后在您的CSS中,您可以简单地例如: svg { fill: red; } 一些资源:SVG技巧 泡芙达蒙 2020.03.18 如果您需要SVG使用CSS完全可样式化,则必须在DOM中内联。这可以通过SVG注入来实现,该注入使用Javascript <img>在页面加载后用SVG文件的内容替换HTML元素(通常是元素)。 这是使用SVGInject的一个最小示例: <html> <head> <script src="svg-inject.min.js"></script> </head> <body> <img src="image.svg" onload="SVGInject(this)" /> </body> </html> 加载图像后,onload="SVGInject(this)将触发注入,并且该<img>元素将被src属性中提供的文件内容替换。这适用于所有支持SVG的浏览器。 免责声明:我是SVGInject的合著者 卡卡西Itachi 2020.03.18 采用 srcset 当今srcset大多数当前的浏览器都支持属性,该属性允许为不同的用户指定不同的图像。例如,您可以将其用于1x和2x像素密度,浏览器将选择正确的文件。 在这种情况下,如果您在中指定了SVG srcset,但浏览器不支持SVG ,则会在上回退src。 <img src="logo.png" srcset="logo.svg" alt="My logo"> 与其他解决方案相比,此方法具有以下优点: 它不依赖任何奇怪的黑客或脚本 这很简单 您仍然可以包含替代文字 支持的浏览器srcset应该知道如何处理它,以便它仅下载所需的文件。 TonyItachi 2020.03.18 <object>并<embed>具有一个有趣的属性:它们使从外部文档中获得SVG文档的引用成为可能(考虑了同源策略)。然后,可以使用该参考为SVG设置动画,更改其样式表等。 给定 <object id="svg1" data="/static/image.svg" type="image/svg+xml"></object> 然后您可以做类似的事情 document.getElementById("svg1").addEventListener("load", function() { var doc = this.getSVGDocument(); var rect = doc.querySelector("rect"); // suppose our image contains a <rect> rect.setAttribute("fill", "green"); }); 宝儿 2020.03.18 从IE9及更高版本开始,您可以在普通的IMG标签中使用SVG。 https://caniuse.com/svg-img <img src="/static/image.svg">
神乐Tony阿飞
2020-03-18
我应该使用<img>,<object>或<embed>用于加载SVG文件插入到页面的方式类似于加载jpg,gif还是png?
<img>
<object>
<embed>
jpg
gif
png
每个代码分别是什么以确保其正常工作?(在我的研究中,我看到了关于包含模仿类型或指向后备SVG渲染器的参考,但是没有看到一个很好的最新参考)。
假设我正在用Modernizr检查SVG支持,然后退回(可能是用一个普通<img>标签进行替换)不支持SVG的浏览器。
第2062篇《我是否对SVG文件使用,或?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点</p> 共6个回答 逆天Stafan猴子 2020.03.18 我建议结合使用 <svg viewBox="" width="" height=""> <path fill="#xxxxxx" d="M203.3,71.6c-.........."></path> </svg> 西门Pro 2020.03.18 我个人会使用<svg>标签,因为如果您这样做,则可以完全控制它。如果您确实使用它,<img>则不会用CSS等控制SVG的内部。 另一件事是浏览器支持。 只需打开svg文件并将其直接粘贴到模板中即可。 <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3400 2700" preserveAspectRatio="xMidYMid meet" (click)="goHome();"> <g id="layer101"> <path d="M1410 2283 c-162 -225 -328 -455 -370 -513 -422 -579 -473 -654 -486 -715 -7 -33 -50 -247 -94 -475 -44 -228 -88 -448 -96 -488 -9 -40 -14 -75 -11 -78 2 -3 87 85 188 196 165 180 189 202 231 215 25 7 129 34 230 60 100 26 184 48 185 49 4 4 43 197 43 212 0 10 -7 13 -22 9 -13 -3 -106 -25 -208 -49 -102 -25 -201 -47 -221 -51 l-37 -7 8 42 c4 23 12 45 16 49 5 4 114 32 243 62 129 30 240 59 246 66 10 10 30 132 22 139 -1 2 -110 -24 -241 -57 -131 -33 -240 -58 -242 -56 -6 6 13 98 22 107 5 4 135 40 289 80 239 61 284 75 307 98 14 15 83 90 153 167 70 77 132 140 139 140 7 0 70 -63 141 -140 70 -77 137 -150 150 -163 17 -19 81 -39 310 -97 159 -41 292 -78 296 -82 8 -9 29 -106 24 -111 -1 -2 -112 24 -245 58 -134 33 -245 58 -248 56 -6 -7 16 -128 25 -136 5 -4 112 -30 238 -59 127 -29 237 -54 246 -57 11 -3 20 -23 27 -57 6 -28 9 -53 8 -54 -1 -1 -38 7 -81 17 -274 66 -379 90 -395 90 -16 0 -16 -6 3 -102 11 -57 21 -104 22 -106 1 -1 96 -27 211 -57 115 -31 220 -60 234 -66 14 -6 104 -101 200 -211 95 -111 175 -197 177 -192 1 5 -40 249 -91 542 l-94 532 -145 203 c-220 309 -446 627 -732 1030 -143 201 -265 366 -271 367 -6 0 -143 -183 -304 -407z m10 -819 l-91 -161 -209 -52 c-115 -29 -214 -51 -219 -49 -6 1 32 55 84 118 l95 115 213 101 c116 55 213 98 215 94 1 -3 -38 -78 -88 -166z m691 77 l214 -99 102 -123 c56 -68 100 -125 99 -127 -4 -3 -435 106 -447 114 -4 2 -37 59 -74 126 -38 68 -79 142 -93 166 -13 23 -22 42 -20 42 2 0 101 -44 219 -99z"/> <path d="M1126 2474 c-198 -79 -361 -146 -363 -147 -2 -3 -70 -410 -133 -805 -12 -73 -20 -137 -18 -143 2 -6 26 23 54 63 27 40 224 320 437 622 213 302 386 550 385 551 -2 2 -165 -62 -362 -141z"/> <path d="M1982 2549 c25 -35 159 -230 298 -434 139 -203 283 -413 319 -465 37 -52 93 -134 125 -182 59 -87 83 -109 73 -65 -5 20 -50 263 -138 747 -17 91 -36 170 -42 176 -9 8 -571 246 -661 280 -14 6 -7 -10 26 -57z"/> <path d="M1679 1291 c-8 -11 -71 -80 -141 -153 l-127 -134 -95 -439 c-52 -242 -92 -442 -90 -445 6 -5 38 28 218 223 l99 107 154 0 c85 0 163 -4 173 -10 10 -5 78 -79 151 -162 73 -84 136 -157 140 -162 18 -21 18 4 -2 85 -11 46 -58 248 -105 448 l-84 364 -87 96 c-108 121 -183 201 -187 201 -2 0 -10 -9 -17 -19z m96 -488 c33 -102 59 -189 57 -192 -2 -6 -244 -2 -251 4 -5 6 120 375 127 375 4 0 34 -84 67 -187z"/> </g> </svg> 然后在您的CSS中,您可以简单地例如: svg { fill: red; } 一些资源:SVG技巧 泡芙达蒙 2020.03.18 如果您需要SVG使用CSS完全可样式化,则必须在DOM中内联。这可以通过SVG注入来实现,该注入使用Javascript <img>在页面加载后用SVG文件的内容替换HTML元素(通常是元素)。 这是使用SVGInject的一个最小示例: <html> <head> <script src="svg-inject.min.js"></script> </head> <body> <img src="image.svg" onload="SVGInject(this)" /> </body> </html> 加载图像后,onload="SVGInject(this)将触发注入,并且该<img>元素将被src属性中提供的文件内容替换。这适用于所有支持SVG的浏览器。 免责声明:我是SVGInject的合著者 卡卡西Itachi 2020.03.18 采用 srcset 当今srcset大多数当前的浏览器都支持属性,该属性允许为不同的用户指定不同的图像。例如,您可以将其用于1x和2x像素密度,浏览器将选择正确的文件。 在这种情况下,如果您在中指定了SVG srcset,但浏览器不支持SVG ,则会在上回退src。 <img src="logo.png" srcset="logo.svg" alt="My logo"> 与其他解决方案相比,此方法具有以下优点: 它不依赖任何奇怪的黑客或脚本 这很简单 您仍然可以包含替代文字 支持的浏览器srcset应该知道如何处理它,以便它仅下载所需的文件。 TonyItachi 2020.03.18 <object>并<embed>具有一个有趣的属性:它们使从外部文档中获得SVG文档的引用成为可能(考虑了同源策略)。然后,可以使用该参考为SVG设置动画,更改其样式表等。 给定 <object id="svg1" data="/static/image.svg" type="image/svg+xml"></object> 然后您可以做类似的事情 document.getElementById("svg1").addEventListener("load", function() { var doc = this.getSVGDocument(); var rect = doc.querySelector("rect"); // suppose our image contains a <rect> rect.setAttribute("fill", "green"); }); 宝儿 2020.03.18 从IE9及更高版本开始,您可以在普通的IMG标签中使用SVG。 https://caniuse.com/svg-img <img src="/static/image.svg">
我建议结合使用
<svg viewBox="" width="" height=""> <path fill="#xxxxxx" d="M203.3,71.6c-.........."></path> </svg>
我个人会使用<svg>标签,因为如果您这样做,则可以完全控制它。如果您确实使用它,<img>则不会用CSS等控制SVG的内部。
<svg>
另一件事是浏览器支持。
只需打开svg文件并将其直接粘贴到模板中即可。
svg
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3400 2700" preserveAspectRatio="xMidYMid meet" (click)="goHome();"> <g id="layer101"> <path d="M1410 2283 c-162 -225 -328 -455 -370 -513 -422 -579 -473 -654 -486 -715 -7 -33 -50 -247 -94 -475 -44 -228 -88 -448 -96 -488 -9 -40 -14 -75 -11 -78 2 -3 87 85 188 196 165 180 189 202 231 215 25 7 129 34 230 60 100 26 184 48 185 49 4 4 43 197 43 212 0 10 -7 13 -22 9 -13 -3 -106 -25 -208 -49 -102 -25 -201 -47 -221 -51 l-37 -7 8 42 c4 23 12 45 16 49 5 4 114 32 243 62 129 30 240 59 246 66 10 10 30 132 22 139 -1 2 -110 -24 -241 -57 -131 -33 -240 -58 -242 -56 -6 6 13 98 22 107 5 4 135 40 289 80 239 61 284 75 307 98 14 15 83 90 153 167 70 77 132 140 139 140 7 0 70 -63 141 -140 70 -77 137 -150 150 -163 17 -19 81 -39 310 -97 159 -41 292 -78 296 -82 8 -9 29 -106 24 -111 -1 -2 -112 24 -245 58 -134 33 -245 58 -248 56 -6 -7 16 -128 25 -136 5 -4 112 -30 238 -59 127 -29 237 -54 246 -57 11 -3 20 -23 27 -57 6 -28 9 -53 8 -54 -1 -1 -38 7 -81 17 -274 66 -379 90 -395 90 -16 0 -16 -6 3 -102 11 -57 21 -104 22 -106 1 -1 96 -27 211 -57 115 -31 220 -60 234 -66 14 -6 104 -101 200 -211 95 -111 175 -197 177 -192 1 5 -40 249 -91 542 l-94 532 -145 203 c-220 309 -446 627 -732 1030 -143 201 -265 366 -271 367 -6 0 -143 -183 -304 -407z m10 -819 l-91 -161 -209 -52 c-115 -29 -214 -51 -219 -49 -6 1 32 55 84 118 l95 115 213 101 c116 55 213 98 215 94 1 -3 -38 -78 -88 -166z m691 77 l214 -99 102 -123 c56 -68 100 -125 99 -127 -4 -3 -435 106 -447 114 -4 2 -37 59 -74 126 -38 68 -79 142 -93 166 -13 23 -22 42 -20 42 2 0 101 -44 219 -99z"/> <path d="M1126 2474 c-198 -79 -361 -146 -363 -147 -2 -3 -70 -410 -133 -805 -12 -73 -20 -137 -18 -143 2 -6 26 23 54 63 27 40 224 320 437 622 213 302 386 550 385 551 -2 2 -165 -62 -362 -141z"/> <path d="M1982 2549 c25 -35 159 -230 298 -434 139 -203 283 -413 319 -465 37 -52 93 -134 125 -182 59 -87 83 -109 73 -65 -5 20 -50 263 -138 747 -17 91 -36 170 -42 176 -9 8 -571 246 -661 280 -14 6 -7 -10 26 -57z"/> <path d="M1679 1291 c-8 -11 -71 -80 -141 -153 l-127 -134 -95 -439 c-52 -242 -92 -442 -90 -445 6 -5 38 28 218 223 l99 107 154 0 c85 0 163 -4 173 -10 10 -5 78 -79 151 -162 73 -84 136 -157 140 -162 18 -21 18 4 -2 85 -11 46 -58 248 -105 448 l-84 364 -87 96 c-108 121 -183 201 -187 201 -2 0 -10 -9 -17 -19z m96 -488 c33 -102 59 -189 57 -192 -2 -6 -244 -2 -251 4 -5 6 120 375 127 375 4 0 34 -84 67 -187z"/> </g> </svg>
然后在您的CSS中,您可以简单地例如:
svg { fill: red; }
一些资源:SVG技巧
如果您需要SVG使用CSS完全可样式化,则必须在DOM中内联。这可以通过SVG注入来实现,该注入使用Javascript <img>在页面加载后用SVG文件的内容替换HTML元素(通常是元素)。
这是使用SVGInject的一个最小示例:
<html> <head> <script src="svg-inject.min.js"></script> </head> <body> <img src="image.svg" onload="SVGInject(this)" /> </body> </html>
加载图像后,onload="SVGInject(this)将触发注入,并且该<img>元素将被src属性中提供的文件内容替换。这适用于所有支持SVG的浏览器。
onload="SVGInject(this)
src
免责声明:我是SVGInject的合著者
srcset
当今srcset大多数当前的浏览器都支持属性,该属性允许为不同的用户指定不同的图像。例如,您可以将其用于1x和2x像素密度,浏览器将选择正确的文件。
在这种情况下,如果您在中指定了SVG srcset,但浏览器不支持SVG ,则会在上回退src。
<img src="logo.png" srcset="logo.svg" alt="My logo">
与其他解决方案相比,此方法具有以下优点:
<object>并<embed>具有一个有趣的属性:它们使从外部文档中获得SVG文档的引用成为可能(考虑了同源策略)。然后,可以使用该参考为SVG设置动画,更改其样式表等。
给定
<object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>
然后您可以做类似的事情
document.getElementById("svg1").addEventListener("load", function() { var doc = this.getSVGDocument(); var rect = doc.querySelector("rect"); // suppose our image contains a <rect> rect.setAttribute("fill", "green"); });
从IE9及更高版本开始,您可以在普通的IMG标签中使用SVG。
https://caniuse.com/svg-img
<img src="/static/image.svg">
相似问题
0 回答
5 回答
25 回答
问题类别