我想使用svg作为div元素的容器,div元素应包含多个元素.目前它看起来像这样:
<body>
<svg width="100%" height="100%" viewBox="0 0 45 90" version="1.1" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path d="M45.02,17.449l0,-5.837l-0.324,0c0,-3.841 0,-6.21 0,-6.344c0,-0.786 0.105,-3.078 -2.657,-3.659c-5.996,-1.263 -19.539,-1.352 -19.539,-1.352c0,0 -13.543,0.089 -19.539,1.352c-2.762,0.58 -2.657,2.873 -2.657,3.659c0,0.192 0,4.987 0,12.133l-0.324,0l0,14.537l0.324,0c0,22.9 0,52.313 0,52.794c0,0.786 -0.105,3.079 2.656,3.66c5.997,1.262 19.54,1.351 19.54,1.351c0,0 13.542,-0.089 19.539,-1.351c2.762,-0.581 2.657,-2.874 2.657,-3.66c0,-0.594 0,-45.159 0,-67.283l0.324,0Zm-22.52,-13.778c0.535,0 0.969,0.434 0.969,0.969c0,0.536 -0.434,0.97 -0.969,0.97c-0.535,0 -0.969,-0.435 -0.969,-0.97c0,-0.536 0.434,-0.969 0.969,-0.969Zm20.262,75.595l-40.525,0l0,-71.234l40.524,0l0,71.234l0.001,0Z" style="fill-rule:nonzero;"></path>
<foreignObject x="2.238" y="8.019" width="40" height="71">
<div id="screen">
I'm a very long text. Why am I so big?
</div>
</foreignObject>
</svg>
</body>
CSS
html, body{
width: 100%;
height: 100%;
}
#screen{
background: green;
overflow: scroll;
width: 100%;
height: 100%;
font-size: 10px;
}
我的问题是screen-div中的所有元素都比预期的要大.例如,请参阅滚动条或文本大小.
我假设其内容的foreignObject缩放程度与svg相同.有办法避免这种情况吗？我可以将内部的div标准化foreignObject为不缩放或缩放吗？
我能想到的唯一的解决办法是使用JavaScript来动态的大小和反规模的foreignObject基础上,视框的尺寸相对于offsetWidth与offsetHeight外部的<svg>.
例如,在本演示中,我碰巧将SVG的大小硬编码为viewBox尺寸的四倍.为了抵消这种情况,我做了foreignObject四倍大,但后来缩小到四分之一大小:
<foreignObject width="164" height="288" transform="translate(2,8) scale(0.25,0.25)">
一个好的通用解决方案是在任何自定义命名空间中放置一个额外的属性foreignObject,然后加载一个JavaScript库,找到这些元素并动态调整它们(并随着SVG大小的变化调整它们).
请注意,比较offsetWidth(和高度)与viewBox宽度(和高度)需要仔细考虑preserveAspectRatioSVG上属性的值.
编辑:我已经创建了一个小型库来执行此操作
要使用它:
x和y属性来放置<foreignObject>和,width以及height值来调整大小.使用以下之一:
fixedSizeForeignObject( someForeignObjectElement );
fixedSizeForeignObjects( arrayOfForeignObjectElements );
这个怎么运作:
我会在我的网站关闭的(不太可能的)情况下复制/粘贴库:
(function(win){
const svgs, els=[];
win.fixedSizeForeignObjects = function fixedSizeForeignObjects(els) {
els.forEach( fixedSizeForeignObject );
}
win.fixedSizeForeignObject = function fixedSizeForeignObject(el) {
if (!svgs) { svgs = []; win.addEventListener('resize',resizeSVGs,false) }
let svg=el.ownerSVGElement, found=false;
for (let i=svgs.length;i--;) if (svgs[i]===svg) found=true;
if (!found) svgs.push(svg);
let info = {
el:el, svg:svg,
w:el.getAttribute('width')*1, h:el.getAttribute('height')*1,
x:el.getAttribute('x')*1, y:el.getAttribute('y')*1
};
els.push(info);
el.removeAttribute('x');
el.removeAttribute('y');
calculateSVGScale(svg);
fixScale(info);
}
function resizeSVGs(evt) {
svgs.forEach(calculateSVGScale);
els.forEach(fixScale);
}
function calculateSVGScale(svg) {
let w1=svg.viewBox.animVal.width, h1=svg.viewBox.animVal.height;
if (!w1 && !h1) svg.scaleRatios = [1,1]; // No viewBox
else {
let info = win.getComputedStyle(svg);
let w2=parseFloat(info.width), h2=parseFloat(info.height);
let par=svg.preserveAspectRatio.animVal;
if (par.align===SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_NONE) {
svg.scaleRatios = [w2/w1, h2/h1];
} else {
let meet = par.meetOrSlice === SVGPreserveAspectRatio.SVG_MEETORSLICE_MEET;
let ratio = (w1/h1 > w2/h2) != meet ? h2/h1 : w2/w1;
svg.scaleRatios = [ratio, ratio];
}
}
}
function fixScale(info) {
let s = info.svg.scaleRatios;
info.el.setAttribute('width', info.w*s[0]);
info.el.setAttribute('height',info.h*s[1]);
info.el.setAttribute('transform','translate('+info.x+','+info.y+') scale('+1/s[0]+','+1/s[1]+')');
}
})(window);