如何使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
}

这摘自本文 。 请仔细阅读以获取更详细的说明，限制和其他可能的解决方法。

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