javascript - 如何使用固定元素使 SVG 响应式？

Question

一些UI元素的大小是固定的；其他元素的大小响应容器的大小。

例如，图表的文本和图例通常是固定大小的，但其轴的大小通常是响应式的。

<svg font-size="14" height="200" width="100%" shape-rendering="crispEdges">
  <rect x="30" y="10" width="120" height="30" stroke="black" fill-opacity="0"></rect>
  <text color="black" x="32" y="24">Legend</text>
</svg>

<div style="font-size: 14px; height:200px; position:relative; width:100%">
  <div style="position:absolute; top:10px; left:30px; width: 116px; height: 26px; border: 1px solid black; padding: 2px">
    Legend
  </div>
  <div style="position:absolute; top:5px; left:5px; bottom: 5px; right:5px; border-left: 1px solid black; border-bottom: 1px solid black">
  </div>
</div>

据我所知，SVG 无法做到这一点。我可以使用 JS 并监听窗口调整大小事件，尽管该事件并不总是被触发，例如打印时。

浏览器 SVG 中可以有固定的响应式元素吗？

Answer 1

从我从你的问题中得到的结果来看，监听调整大小事件确实不会影响打印。因此，您需要做的是监听打印请求，并从中运行调整大小代码:

window.addEventListener("beforeprint", beforePrint);
window.addEventListener("afterprint", afterPrint);
if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql) {
        if (mql.matches) {
            beforePrint();
        } else {
            afterPrint();
        }
    });
}

function beforePrint() {
    //Resize for printing
}

function afterPrint() {
    //Resize again for after printing
}

这取自this article 。请阅读它以获取更详细的描述、限制和其他可能的解决方法。

对于需要调整大小但窗口调整大小事件还不够的任何其他情况，通常至少有一个半简单的解决方法。 JavaScript 是处理像对图表中的项目进行排序和调整大小这样复杂的事情的唯一选择。