如何避免缩放svgs的foreignObjects内的元素？答案

【问题标题】：How to avoid scaling of elements inside foreignObjects of svgs?如何避免缩放svgs的foreignObjects内的元素？
【发布时间】：2017-12-16 01:27:51
【问题描述】：

我想使用 svg 作为 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

【问题讨论】：

删除你的viewBox?或者您是说您想要缩放 SVG 的某些部分，而不是其他部分？
我想缩放整个 svg，除了屏幕 div 内的对象。它们的行为应该像 div 中的“普通”html 元素，例如#screen div 内的 10px 字体大小应与 svg 外 div 的大小相同。

标签： html css svg

【解决方案1】：

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

例如，在这个演示中，我碰巧将 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、宽度、高度值会被记录下来。拥有 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);

【讨论】：

请注意，该库和演示仅经过测试可在 Chrome 和 Firefox 上运行。另请注意，（2017 年 7 月）稳定版 Chrome for OS X 存在一个错误，其中overflow:auto 导致在出现滚动条时foreignObject 呈现在错误的位置。 Windows 版 Chrome 中不存在此错误。
感谢您的回答和您的图书馆。效果很好！
感谢您的提问和回答。我遇到了这个确切的问题，并认为它需要一系列转换，但我对 API 的了解不够。我喜欢阅读这个图书馆。我喜欢你的风格，@Phrogz
嗨 Phrogz，我重新阅读了 MDN 打开 API 描述的代码，并意识到如果未初始化 viewBox，我们可能无法访问其属性。实际上， animVal 仍然为空。我重新编写了代码并添加了一些 cmets 以帮助我理解我刚刚研究的内容。 Github 链接：github.com/vipatron/fixed-size-foreignObject.js 这一行纯属巧思。我很敬畏：让 ratio = (w1/h1 > w2/h2) != meet ? h2/h1 : w2/w1;