带有SVG文件的Html页面无法按高度缩放
[英]Html page with SVG file doesn't scale by Height
问题描述
I want to manage SVG with help JS and created simple Html page for rendering SVG, but scale by Height doesn't work in Browser. 
我想用JS帮助管理SVG并创建简单的Html页面来渲染SVG，但是按Height缩放在浏览器中不起作用。 Why? 为什么？
How do I have to write template HTML page for scaling SVG file on a full page? 如何编写模板HTML页面以在整页上缩放SVG文件？
SVGHTML.html 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 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>
1 个解决方案
解决方案1
0 已采纳 2016-07-27 15:37:54
I found decision. 我找到了决定。 Cascading style sheets CSS 2.1 - 10.5 says the percentage height is calculated with respect to the height of the generated box's containing block. 级联样式表CSS 2.1 - 10.5表示百分比高度是根据生成的框的包含块的高度计算的。 If the height of the containing block is not specified explicitly (ie, it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. 如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则该值将计算为“auto”。 For absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element. 对于其包含块基于块容器元素的绝对定位元素，百分比是相对于该元素的填充框的宽度计算的。 This is a change from CSS1, where the percentage width was always calculated with respect to the content box of the parent element. 这是CSS1的变化，其中百分比宽度始终相对于父元素的内容框计算。
So I have to use style position:absolute in tag object with SVG file. 所以我必须使用样式position:absolute标签对象中的position:absolute与SVG文件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.