Question

这是我将删除的https://stackoverflow.com/questions/29105120/preserve-aspect-ratio-for-svg-text-and-react-to-javascript-touch-events的经过编辑的副本，因为它询问了2个相关但技术上不同的问题。

正如我在上一个问题中已经解释的那样，我试图制作一个带有4个按钮的导航div，一个向左移动，一个向右移动，另一个向下移动，另一个向上移动。另外，中间需要一个OK按钮。

这对于此处给出的解释非常有效：Using CSS and HTML5 to create navigation buttons using trapezoids

我创建了SVG：

<div class="function height3x svg-container" style="height: 112px; width: 200px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="mySVG" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style="background-color: whitesmoke">
    <g class="function" id="keyboard_btn_24">
        <polygon id="ok" points="25,25 75,25 75,75 25,75"></polygon>
        <text id="ok_text" x="39" y="55">OK</text>
    </g>
    <g class="function" id="keyboard_btn_25">
        <polygon id="up" stroke="black" stroke-width="0.1" points="0,0 100,0 65,35 35,35"></polygon>
        <text x="42" y="20"></text>
    </g>
    <g class="function" id="keyboard_btn_26">
        <polygon id="right" stroke="black" stroke-width="0.1" points="100,0 100,100 65,65 65,35"></polygon>
        <text x="81" y="53"></text>
    </g>
    <g class="function" id="keyboard_btn_27">
        <polygon id="down" stroke="black" stroke-width="0.1" points="0,100 35,65 65,65 100,100"></polygon>
        <text x="42" y="91"></text>
    </g>
    <g class="function" id="keyboard_btn_28">
        <polygon id="left" stroke="black" stroke-width="0.1" points="0,0 35,35 35,65 0,100"></polygon>
        <text x="5" y="53"></text>
    </g>
</svg>
</div>

但我有两个问题，我似乎无法弄明白。

首先：虽然我希望SVG能够做出响应，但我并不想在不保持字体宽高比的情况下缩放文本。

Text that was scaled vs. non-scaled

我已经尝试过（不成功）preserveAspectRatio，这对文本似乎没什么作用。

问题：在更改svg的宽高比时，如何让标签保持其宽高比？

您可以查看和编辑最小示例：jsFiddle

Paulie_D - 评论我的老问题：

对于宽高比，你应该删除宽度和宽度。身高100％值。他们并不是真正需要的。 SVG将扩展到所需的大小基于div大小。 - jsfiddle.net/2qqrL7ng/1 -

这不是一个选项，因为SVG元素需要响应无法保持宽高比的大小更改。只是文本需要保持比例，其他一切都应该尽可能地响应。

修改

从＆＃34; none＆＃34;切换perserveAspectRatio的svg参数到＆＃34; xMidYMid＆＃34;保持SVG的宽高比，但是期望的效果是，SVG本身不保持它的宽高比，但-tags确实如此。这意味着以下 NOT 是一个解决方案：

<div class="function height3x svg-container" style="height: 112px; width: 200px;">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="mySVG" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background-color: whitesmoke">
        <g class="function" id="keyboard_btn_24">
            <polygon id="ok" points="25,25 75,25 75,75 25,75"></polygon>
            <text id="ok_text" x="39" y="55">OK</text>
        </g>
        <g class="function" id="keyboard_btn_25" preserveAspectRatio="xMidYMid">
            <polygon id="up" stroke="black" stroke-width="0.1" points="0,0 100,0 65,35 35,35"></polygon>
            <text x="42" y="20"></text>
        </g>
        <g class="function" id="keyboard_btn_26">
            <polygon id="right" stroke="black" stroke-width="0.1" points="100,0 100,100 65,65 65,35"></polygon>
            <text x="81" y="53"></text>
        </g>
        <g class="function" id="keyboard_btn_27">
            <polygon id="down" stroke="black" stroke-width="0.1" points="0,100 35,65 65,65 100,100"></polygon>
            <text x="42" y="91"></text>
        </g>
        <g class="function" id="keyboard_btn_28">
            <polygon id="left" stroke="black" stroke-width="0.1" points="0,0 35,35 35,65 0,100"></polygon>
            <text x="5" y="53"></text>
        </g>
    </svg>
</div>

/ EDIT

提前致谢。

Answer 1

我知道这是一个古老的问题，但是我确实找到了一种方法来完成纯SVG（无JS）中的要求，而且我已经在产品中使用它了，没有问题！

诀窍是定义不带<svg>的父viewBox元素，以便采用容器的尺寸，然后为另一种{{1} }您想要的值！

在下面的代码片段中，我只是使用了问题中使用的SVG，并将所有<svg>应用程序放在了preserveAspectRatio中。

<polygon>

<svg viewBox="0 0 100 100" preserveAspectRatio="none">

Answer 2

问题：在改变svg的宽高比时，如何让标签保持宽高比？

你做不到。如果文本是SVG的一部分，它将与SVG一起缩放。没有办法让SVG的一部分免于缩放。

可能的解决方案：

（1）从SVG中删除文本并将其放在顶部。例如，在HTML或其他内容中使用定位的<div>。

（2）使用JS计算SVG的宽高比，并对<text>元素应用逆缩放变换。

Answer 3

如果您对当前尺寸具有javascript控制（例如，进入全屏模式，或者仅通过检查用户使用的视口大小），则可以在SVG之外的父div中添加一个简单的类。

然后，在两种情况下设置SVG文本的字体大小：父div具有此类（告诉您svg已缩放），父div没有此类（例如SVG）未缩放）。如果是这种情况，此简单的解决方案将起作用。

.svg_text {font-size: 12px;} /* normal non-scaled SVG */
.case_for_big_screen_thus_SVG_scaled .svg_text {font-size: 6px;} /* this parent class only is added when viewport dimensions make your SVG to be scaled */

保留SVG文本的宽高比

3 个答案: