2

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

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

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

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

以下是文档源的启动方式：

<!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 中一样在 Chrome/Firefox 中呈现的任何想法？

4

1 回答 1

2

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

使生成 svg 的脚本更智能地为“height”和“width”输入适当的值是一个更好的解决方案，但现在，只需设置
height="50000" width="2400"
而不是使用%值，适用于我。

于 2013-05-21T16:21:34.943 回答