Question

我想使用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;
}

JSFiddle

我的问题是screen-div中的所有元素都比预期的要大。例如请参阅滚动条或文本大小。

我假设foreignObject的内容与svg的内容相同。有办法避免这种情况吗？我可以将foreignObject内的div标准化为不缩放或缩放吗？

svg is "Smartphone" by Martin Jordan from the Noun Project

Answer 1

我能想到的唯一解决方案是使用JavaScript根据viewBox维度与foreignObject和offsetWidth外offsetHeight动态调整大小并反缩放<svg> 1}}。

例如，在本演示中，我碰巧将SVG的大小硬编码为viewBox尺寸的四倍。为了抵消这种情况，我将foreignObject提高了四倍，但随后将其缩小到四分之一：

<foreignObject width="164" height="288" transform="translate(2,8) scale(0.25,0.25)">

https://jsfiddle.net/7ttps7a7/3/

一个好的通用解决方案是在任何foreignObject上的自定义命名空间中放置一个额外的属性，然后加载一个JavaScript库，找到这些元素并动态调整它们（并保持它们的大小调整为SVG改变了。）

请注意，比较offsetWidth（和高度）与viewBox宽度（和高度）需要谨慎考虑SVG上preserveAspectRatio属性的值。

修改：我创建了一个小型库来执行此操作

图书馆：http://phrogz.net/SVG/fixed-size-foreignObject.js
演示：http://phrogz.net/SVG/fixed-size-foreignObject.html

使用它：

在您的HTML或SVG页面中包含该库 请下载并在您自己的网站上托管;我不是CDN。
请务必使用x和y属性来设置<foreignObject>，width和height值以确定其大小。

使用以下其中一项：

fixedSizeForeignObject( someForeignObjectElement );
fixedSizeForeignObjects( arrayOfForeignObjectElements );

工作原理：

当将一个foreignObject添加到要保持调整大小的元素列表时，会记录其原始的x，y，width，height值。拥有foreignObject的SVG元素被添加到要监视的SVG元素列表中。
当窗口调整大小时，触发代码（a）计算每个SVG的比例（实际像素与viewBox大小），然后（b）对于每个注册的foreignObject，它调整宽度/高度是正确的，然后进行缩放元素向下以适合原始位置。

我会在我的网站关闭的（不太可能的）情况下复制/粘贴库：

(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);

如何避免svgs的foreignObjects中的元素缩放？

1 个答案:

https://jsfiddle.net/7ttps7a7/3/