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

从我想出的问题来看，监听调整大小的事件确实并不会减少打印的难度。因此，您需要做的就是监听打印请求，并从中运行您的调整大小代码：

SELECT row_number() over () as id, group,
       string_agg(t1.value, ',' ORDER BY "ORDER"),
FROM t2
GROUP BY group
HAVING COUNT(*) = COUNT(t1.value);

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

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

如何通过固定的元素使SVG响应？

1 个答案: