在本文件:可以转义SVG视图吗? (或如何定位在缩放/ SVG转换HTML DIV?)
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden
}
#content {
width: 100%;
height: 100%
}
<div id="content">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="90%" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid meet">
<rect style="fill:none;stroke:black" width="540" height="157" x="690" y="26"></rect>
<text style="font-size:148px;text-align:center;text-anchor:middle;fill:black;stroke:none" x="960" y="145">Test</text>
<text style="font-size:112px;text-align:center;text-anchor:middle;fill:black;stroke:none" x="960" y="340">Lorem ipsum etc etc</text>
<foreignObject x="10" y="726" width="1901" height="347">
<div xmlns="http://www.w3.org/1999/xhtml" style="width:99.6%;height:97.7%;border:4px solid blue">
<p style="text-align:center">Hello World, from HTML inside SVG.</p>
</div>
</foreignObject>
</svg>
<div style="width:99%;border:4px solid blue">
<p style="text-align:center">Hello World, from HTML outside SVG.</p>
</div>
</div>
我使用视框,使其充满重新调整为任意大小的SVG浏览器窗口(通常svg的90%高度是100%;为了便于说明,我在此将其缩小)。在那个SVG中是一个包含一些HTML呈现的外部对象。
现在,呈现的HTML输出正在重新调整以适应viewBox坐标;请注意内部svg内容的边框宽度和文字大小与外部大小不同,并且在窗口大小调整时它会发生变化。
我想要foreignObject
的位置和大小来定义内部div的边界框,但我不希望它实际重新调整内容,只是为了重新排列它们。有没有办法做到这一点?
(在顶部的文本还重新调整与窗口,但是这需要在这种情况下)。
请注意,我不能移动或删除视框。我可以把内部div的svg以外,并使用JavaScript来调整它的大小,但我不知道如何设置它的边界框(但不是比例),如果它在里面,它会。
(我不明白的是,我必须指定div的宽度/高度小于100%,否则会在内部和外部裁剪边框,这可能只是一个Chrome的事情。但也不是真正重要的,我只是好奇)
编辑AmeliaBR's answer之后,这是我的代码已经出来:
function svgTransform(x, y, matrix, svg) {
var p = svg.createSVGPoint();
p.x = x;
p.y = y;
return p.matrixTransform(matrix);
}
function svgScreenBounds(svgElement) {
var matrix = svgElement.getScreenCTM();
var r = svgElement.getBBox();
var leftTop = svgTransform(r.x, r.y, matrix, svgElement.ownerSVGElement);
var rightBottom = svgTransform(r.x + r.width, r.y + r.height, matrix, svgElement.ownerSVGElement);
return {
x: leftTop.x,
y: leftTop.y,
width: rightBottom.x - leftTop.x,
height: rightBottom.y - leftTop.y
};
}
function adjustOverlay() {
var placeholder = document.getElementById('placeholder');
var overlay = document.getElementById('overlay');
var bounds = svgScreenBounds(placeholder);
overlay.style.left = bounds.x + 'px';
overlay.style.top = bounds.y + 'px';
overlay.style.width = bounds.width + 'px';
overlay.style.height = bounds.height + 'px';
overlay.style.display = 'block';
}
html,body { height: 100%; margin: 0; padding: 0; overflow: hidden }
#content { width: 100%; height: 100% }
#overlay {
display: none;
position: absolute;
border:4px solid blue;
box-sizing: border-box;
}
<body onload="adjustOverlay()" onresize="adjustOverlay()">
<div id="content">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid meet">
<rect style="fill:none;stroke:black" width="540" height="157" x="690" y="26"></rect>
<text style="font-size:148px;text-align:center;text-anchor:middle;fill:black;stroke:none" x="960" y="145">Test</text>
<text style="font-size:112px;text-align:center;text-anchor:middle;fill:black;stroke:none" x="960" y="340">Lorem ipsum etc etc</text>
<rect style="fill:yellow;stroke:black" width="1901" height="100" x="10" y="618" rx="20" ry="20"></rect>
<text style="font-size:64px;text-align:center;text-anchor:middle;fill:black;stroke:none" x="960" y="685">Bottom banner text</text>
<rect style="visibility:hidden" x="10" y="726" width="1901" height="347" id="placeholder"></rect>
</svg>
</div>
<div id="overlay">
<p style="text-align:center">Hello World, from HTML outside SVG.</p>
</div>
</body>
它似乎表现得如预期。 (并且宽度小于100%的原因是因为我需要box-sizing: border-box
- 在提问之前我曾尝试过html
元素的样式,但它在那里没有影响;显然它需要直接应用而不是继承。)
viewBox不是一个窗口,它不是一个“移动”或“移除”或“改变或”覆盖“的东西,它是一种坐标系,对于SVG元素来说是固定的和绝对的 – 2014-09-30 07:37:20
** viewBox属性**是可以被移动或移除的东西,并且可能是可能的答案的一部分,除非我不能做到这一点,而不会破坏我希望以他们的方式工作的其他事物,这就是为什么我说 – Miral 2014-09-30 23:51:43
感谢您添加详细的代码来帮助其他人。非常好地组织到逻辑函数 – AmeliaBR 2014-10-01 15:54:05