个人中心
gpt4 book ai didi

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

转载 作者：搜寻专家 更新时间：2023-10-31 08:07:00 27 4
gpt4 key购买 nike

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

最佳答案

我能想到的唯一解决方案是使用 JavaScript 动态调整和反缩放 foreignObject基于 viewBox 尺寸与 offsetWidth和 offsetHeight外层 <svg> .

例如，在这个演示中，我碰巧将 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 (和高度)vs viewBox宽度(和高度)需要考虑 preserveAspectRatio 的值准确地说是 SVG 上的属性。

编辑:我创建了一个小型库来执行此操作

使用方法:

  1. 将库包含在您的 HTML 或 SVG 页面中。
    请下载并托管在您自己的网站上；我不是 CDN。
  2. 请务必使用 x和 y属性来放置你的 <foreignObject> , 和 width和 height值来调整它的大小。

  3. 使用以下之一:

    fixedSizeForeignObject( someForeignObjectElement );
    fixedSizeForeignObjects( arrayOfForeignObjectElements );

工作原理:

  1. 当将 foreignObject 添加到元素列表以保持调整大小时，将记录其原始 x、y、宽度和高度值。拥有 foreignObject 的 SVG 元素被添加到要观察的 SVG 元素列表中。
  2. 当窗口调整大小时，代码被触发，(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);

关于html - 如何避免缩放 svgs 的 foreignObjects 中的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45043777/

27 4 0
文章推荐： html - Favicon 未显示在 Google Chrome 浏览器中
文章推荐： java - 为什么Java中有原始数据类型？
文章推荐： java - 计算 Java 中 Map 中某个键的出现次数
文章推荐： swift - 我如何快速设置 MPVolumeView？
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com