0

我有一个必须绝对定位并且没有宽度/高度的 SVG，因为它在运行时是未知的。但是，它确实已overflow: visible设置为允许在任何坐标处呈现内容。

当 SVG 有一个像 a<path>或<circle>y 轴非常远的元素（例如 4000 像素）时，SVG 似乎在 Chrome 中呈现偏移。在 Firefox 中，SVG 在正确的坐标处正确呈现。

更奇怪的是，如果我cursor在元素上设置，它会出现在正确的位置，而不是渲染的位置。

这是一个例子：

const canvas = document.getElementById('canvas');
const canvasZoom = document.getElementById('canvasZoom');

canvasZoom.addEventListener('change', () => {
  const zoom = canvasZoom.value;
  canvas.style.zoom = zoom;
});
#canvas {
  position: relative;
  width: 4200px;
  height: 4200px;
}

#line {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: visible;
  background: rgba(255, 0, 0, 0.2);
}

#line path {
  stroke: black;
  stroke-width: 10px;
  cursor: move;
}

#box {
  position: absolute;
  top: 4000px;
  left: 300px;
  width: 100px;
  height: 100px;
  border: 1px solid #00ff00;
}
<input type="range" id="canvasZoom" min="0" max="1" value="100" step="0.05">
<div id="canvas">
  <div id="box"></div>
  <svg xmlns="http://www.w3.org/2000/svg" id="line">
    <path d="M 350 4000 L 350 4100" fill="red" />
    <circle cx="350" cy="4050" r="10" fill="blue" />
  </svg>
</div>

火狐（预期）：

火狐

铬合金：

铬合金

如果 SVG 元素在顶部附近有坐标，则它会正确呈现。

我试过设置类似的东西，width: 100%; height: 100%但它不能解决它。例如，放大和缩小会导致渲染再次不正确。

如果我将 SVG 的widthand设置height为等于父元素，它会正确呈现。然而，这在真正的实现中是不可能的或不希望的。

4

0 回答 0