相关疑难解决方法(0)

我正在尝试使用流畅的SVG画布,可以轻松调整大小.到目前为止,我到处都在使用百分比.但是,似乎SVG polygon和paths不支持point属性中的百分比.这是一个例子:

(的jsfiddle)

<svg width='90%' height='90%' style='background-color: whitesmoke'>
    <rect x='40%' y='40%' width='25%' height='25%' />

    <polygon points="0,0 0,100 30,20 30,0" />
    <polygon points="30,0 30,20 60,0 60,0" />
    <polygon points="60,0 60,0 90,30 90,0" />
</svg>

但是,如果我开始将points属性中的数字更改为百分比,则会因控制台中的解析错误而失败.我正在寻找一种方法来获得可以使用<svg>元素调整大小的多边形.

这是/sf/ask/2037358431/的编辑副本，我将其删除，因为它要求 2相关但技术上不同的问题。

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

这与此处给出的解释非常有效：使用 CSS 和 HTML5 使用梯形创建导航按钮

我创建了像这样的 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> …