我有一个奇怪的问题,即定期我的SVG在Google Chrome(第65版)中渲染非常小,但仅限于Windows 10.这是旁边的图片的屏幕截图单词sum:
它究竟应该是什么样的:
当我将鼠标悬停在开发工具中的小图像上时,这就是我所看到的:
其中,显然不是3x6像素!除此之外,当图像嵌入特定的<iframe>
元素内时,问题似乎只会出现。我已经将SVG渲染为PNG,这很好,大小按预期报告。我相信这里没有CSS,因为这在Mac和Mac上的同一版本的谷歌浏览器中运行良好。的Chromebook。
用<img>
替换<object>
按预期工作,但我认为这是核选项 - 我不想在这条路线上针对一个特定的边缘情况。
以下是图片的代码:
<img class="my-class" src="https://path.to.my.cdn/sum.svg" alt="sum">
。我的级
max-height: 30px;
max-width: none;
margin: 0;
sum.svg
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="3.355ex" height="6.176ex" style="vertical-align: -3.005ex;" viewBox="0 -1365.4 1444.5 2659.1" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg">
<defs>
<path stroke-width="1" id="E1-MJSZ2-2211" d="M60 948Q63 950 665 950H1267L1325 815Q1384 677 1388 669H1348L1341 683Q1320 724 1285 761Q1235 809 1174 838T1033 881T882 898T699 902H574H543H251L259 891Q722 258 724 252Q725 250 724 246Q721 243 460 -56L196 -356Q196 -357 407 -357Q459 -357 548 -357T676 -358Q812 -358 896 -353T1063 -332T1204 -283T1307 -196Q1328 -170 1348 -124H1388Q1388 -125 1381 -145T1356 -210T1325 -294L1267 -449L666 -450Q64 -450 61 -448Q55 -446 55 -439Q55 -437 57 -433L590 177Q590 178 557 222T452 366T322 544L56 909L55 924Q55 945 60 948Z"></path>
<path stroke-width="1" id="E1-MJMATHI-6E" d="M21 287Q22 293 24 303T36 341T56 388T89 425T135 442Q171 442 195 424T225 390T231 369Q231 367 232 367L243 378Q304 442 382 442Q436 442 469 415T503 336T465 179T427 52Q427 26 444 26Q450 26 453 27Q482 32 505 65T540 145Q542 153 560 153Q580 153 580 145Q580 144 576 130Q568 101 554 73T508 17T439 -10Q392 -10 371 17T350 73Q350 92 386 193T423 345Q423 404 379 404H374Q288 404 229 303L222 291L189 157Q156 26 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 112 180T152 343Q153 348 153 366Q153 405 129 405Q91 405 66 305Q60 285 60 284Q58 278 41 278H27Q21 284 21 287Z"></path>
<path stroke-width="1" id="E1-MJMAIN-3D" d="M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153Z"></path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
<use xlink:href="#E1-MJSZ2-2211" x="0" y="0"></use>
<g transform="translate(234,-1051)">
<use transform="scale(0.707)" xlink:href="#E1-MJMATHI-6E" x="0" y="0"></use>
<use transform="scale(0.707)" xlink:href="#E1-MJMAIN-3D" x="600" y="0"></use>
</g>
</g>
</svg>
为了完整起见,这是我看到问题的<iframe>
元素:
<iframe name="the_frame" src="/loader.gif" id="the_frame" style="width: 800px; height: 460px; border: 0;" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *" borderstyle="0" tabindex="0"></iframe>