Question

我想用JS帮助管理SVG并创建简单的Html页面来渲染SVG，但是按Height缩放在浏览器中不起作用。为什么呢？

如何编写模板HTML页面以在整页上缩放SVG文件？

SVGHTML.html

<!DOCTYPE HTML>
<html lang='en'>
<meta http-equiv='X-UA-Compatible' content='IE=10' />
<head>
</head>
<body style='margin: 0; overflow: hidden; width: 100%; height: 100%'>
<object id='SVG' height = "100%" width = "100%"   type='image/svg+xml' data=image.svg></object>
</body>
</html>

image.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg2"
   width="100%" 
   height="100%"
   preserveAspectRatio="xMinYMin meet"
   viewBox="0 0 300 300"
   >
  <metadata
     id="metadata14">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs12" />
  <text
     id="text4"
     font-size="24"
     y="50"
     x="25">SVG Circle Element</text>
  <text
     id="text6"
     y="275"
     x="25">Click the circle to change its size.</text>
  <circle
     id="circle8"
     onclick="doCircle(evt)"
     stroke-width="5"
     stroke="green"
     fill="pink"
     r="50"
     cy="150"
     cx="125" />
</svg>

Answer 1

我找到了决定。层叠样式表CSS 2.1 - 10.5表示百分比高度是根据生成的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则该值计算为“auto”。对于其包含块基于块容器元素的绝对定位元素，百分比是相对于该元素的填充框的宽度计算的。这是CSS1的变化，其中百分比宽度始终相对于父元素的内容框计算。

所以我必须在带有SVG文件的标记对象中使用样式position:absolute。

带有SVG文件的Html页面无法按高度缩放

1 个答案: