Question

我有一个SVG图形，在InkScape中绘制，它具有一些javascript交互性：http://docs.shapeoko.com/content/tPictures/25203-02.svg

我需要以某种方式将其打开到一个新的浏览器窗口/选项卡中，让它填满屏幕并使javascript交互性仍然有效。

此文件http://docs.shapeoko.com/25203-02.html使用

填充屏幕

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"><head> 
  <title>Project ShapeOko diagram 25203-02</title>
  <style type="text/css" media="screen">
    body { background:#fff; margin:0 }
  </style>
</head><body><img src="content/tPictures/25203-02-js.svg" alt="V-Wheel Assembly" style="width: 100%; height: auto;"></img></body></html>

但不是互动的。

此文件http://docs.shapeoko.com/25203-02-test.html无法填满屏幕

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"><head> 
  <title>Project ShapeOko diagram 25203-02</title>
  <style type="text/css" media="screen">
    body { background:#fff; margin:0 }
    </style>
</head><body><object type="image/svg+xml" data="content/tPictures/25203-02.svg" id="25203-02" alt="V-Wheel Assembly" width="100%" height="100%" class="svg-content">    </object></body></html>

但是是互动的（你可以点击部分#s来获得要突出显示的匹配部分图像）。

如何填充窗口和图表是交互式的？

我已经尝试了我能找到的所有内容，但显然不了解搜索结果的内容 - 请简单地分解，或提供完整的解决方案。

Answer 1

您可以像这样编辑svg源。

追加与svg＆＃39; s尺寸相同的viewBox属性。
将width和height属性替换为100％

<svg
   ---
   width="100%"
   height="100%"
   viewBox="0 0 800 400"

如何使InkScape SVG文件填充浏览器窗口并进行交互？

1 个答案: