Question

我有一个在SVG中建模的相当大的树形图。

在IE-9中，它可以根据需要进行垂直滚动。

在Chrome和Firefox中，并非如此。 Chrome中没有滚动但是缩小让我看到更多。在Firefox中，它仅显示标记量的垂直空间。

我假设我在“svg”元素中缺少一些属性，以使其在Chrome / Firefox中正确显示，但不确定是什么。

以下是doc源的开始方式：

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100%" width="100%" style="overflow-x: auto; overflow-y: auto;"  >

  <rect x="685" y="15" rx="10" ry="10" width="380" height="116" style="fill:lightgrey;stroke-width:5;stroke:rgb(0,0,0)" />
  <text x="777" y="38" fill="black"  font-size = "18"  font-family = "sans-serif" font-weight="bold">Folder</text>
  <text x="960" y="38" fill="black"  font-size = "18"  font-family = "sans-serif" font-weight="bold">Content</text>

  <rect x="700" y="45" rx="10" ry="10" width="200" height="75" style="fill:powderblue;stroke-width:1;stroke:rgb(0,0,0)" />
  ................... and so on for 150000 lines ...................

有关可以添加的内容的任何想法，以及它在IE / 9中的渲染效果会在IE-9中呈现吗？

Answer 1

硬编码值分为“高度”和“宽度”解决了Chrome和Firefox中无滚动的严重问题。

使生成svg smarter的脚本为“height”和“width”添加适当的值是一个更好的解决方案但是现在，只需设置
height =“50000”width =“2400”
而不是使用％值，为我工作。

SVG在firefox / chrome / IE中滚动

1 个答案: