javascript - 如何将viewbox的高度和宽度导出为网页的高度和宽度

Question

Svg 定义

 <svg xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink" 
          xmlns:xxx="http://www.abcdef.com/xxx"    
         id="svgId"
     version="1.1" 
     xml:space="preserve" 
     viewBox="0 0 1191 739">....</svg>

问题就在这里

我想将此 svg 放置(映射)到我的网页中的 domElement-div

<div style='width:500px ;height:700px'></div>

我在将 svg 映射到网页布局时遇到问题

提前致谢。

Answer 1

我从这个 PDF 中得到了答案

http://web.cse.ohio-state.edu/~parent/classes/581/Lectures/4.2DviewingHandout.pdf (页码5、6、7)

'提示':

匹配两个窗口的宽高比

R > W / H

Viewport(0, 0, W, W/R)

<小时/>

R < W / H

Viewport(0, 0, H*R, H)

r = 网页视口(viewport)的 w/h