• 这是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具有响应性，但我不希望在不保持字体给定的纵横比的情况下缩放文本。

我已经尝试过（没有成功）preserveAspectRatio，它似乎对文本没有太大作用。

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

您可以查看和编辑最小示例：jsFiddle
Paulie_D -评论我的老问题：
至于纵横比，你应该删除宽度和高度100%的值。它们并不是真的需要。SVG会根据div的大小缩放到所需的大小。jsfiddle.net/2qqrL7ng/1
这不是一个选项，因为SVG元素需要响应大小的变化，不能保持纵横比。只有文本需要保持比例，其他一切都应该尽可能响应。
编辑
将perserveAspectRatio的svg参数从“none”切换到“xMidYMid”可以保持SVG的纵横比，但所需的效果是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="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>

/编辑
先谢谢你。