Question

如何使浏览器重绘/调整缩放SVG的周围<div>，就像对待其他图像一样？

如果您将图像放在绝对定位的元素中，它的宽度或高度会相应调整，如下所示：

＆＃13;

<div style="position: absolute; height: 40%; background: blue;">
  <!-- square transparent GIF -->
  <img 
    style="height: 100%; width: auto; background: #0f0; opacity: 0.6"
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
  >
</div>

＆＃13;

如果你使用SVG，这也有效 - 除非你在Chrome / Edge中调整浏览器的大小。它适用于Firefox。

＆＃13;

Try resizing the fullscreen demo in Safari, Chrome, Firefox

<div style="position: absolute; height: 40%; background: blue;">
  <!-- square transparent GIF -->
  <img 
    style="display: block; height: 100%; width: auto; background: #0f0; opacity: 0.6"
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
  >
</div>

<div style="position: absolute; height: 40%; top: 50%; background: blue;">
  <!-- square transparent SVG -->
  <img 
    style="display: block; height: 100%; width: auto; background: #f00; opacity: 0.6"
    src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'></svg>"
  >
</div>

＆＃13;

[Edit1]：好的，在编写示例代码时，这不再出现在Safari中，而是出现在两个示例中的Chrome中。问题与在Chrome中更复杂的代码上观察到的问题相同。

[Edit2]：所以这可能不是SVG问题，因为它在使用光栅图像时也会出现

[Edit3]：Edge仍有同样的问题，urg。

（通过Smallest data URI image …透明GIF）

Answer 1

好的，所以这与Chrome: SVG container not rescaling responsively有关，并且（坏，坏！）修复似乎是强制重绘这样的动画：

.redraw {
  animation: redraw 1s infinite;
}
     
@keyframes redraw {
  from { min-width: 1px; }
  to   { min-width: 2px; }
}

[FIX:] Try resizing the fullscreen demo in Safari, Chrome, Firefox

<div class="redraw" style="position: absolute; height: 40%; background: blue;">
  <!-- square transparent GIF -->
  <img 
    style="display: block; height: 100%; width: auto; background: #0f0; opacity: 0.6"
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
  >
</div>

<div class="redraw" style="position: absolute; height: 40%; top: 50%; background: blue;">
  <!-- square transparent SVG -->
  <img 
    style="display: block; height: 100%; width: auto; background: #f00; opacity: 0.6"
    src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'></svg>"
  >
</div>

Chrome / Edge不会调整包含响应图像的容器的大小

1 个答案: