Question

我有以下HTML代码：

＆＃13;

<div class="youtube-preview" 
     style="background-color: #333; position: relative; width: 420px; height:316px">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     width="80" height="55"
     style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    <rect width="100%" height="100%" rx="20" ry="0" fill="#fff"/>
</svg>
</div>

＆＃13;

这会产生一个div，它有一个较小的盒子，内部垂直和水平居中，这是我想要的确切效果。

但是，我想将其转换为SVG。在过去的两天里，我一直在寻找一种将元素居中（无缩放）的方法，在流畅的SVG中找不到任何东西。

这甚至可能吗？看起来非常基本......

备注：

＆＃34;黑匣子＆＃34;可以有任何宽度和高度，比率可以改变。
内盒具有固定尺寸，不应缩放（向上或向下）

Answer 1

没有。这是不可能的 - 不使用一些javascript来调整内部框的大小和重新定位。

如果您希望SVG具有响应能力，您必须接受其中的所有内容也会缩放。

最终可能使用SVG 2，但不适用于SVG 1.1和当前浏览器。

水平和垂直中心是svg中固定宽度/高度的元素

1 个答案: