SVG preserveAspectRatio不起作用

Question

我动态绘制一个包含4个金字塔和一个图例的图形。我正在尝试使用preserveAspectRatio = xMidYMid将其集中在页面上，但它不起作用。我已经尝试了一切！

有人可以帮忙解决这个问题吗？

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1400 1000"
xml:space="preserve">
<defs id="def">
    <linearGradient id="d00" x1="0" x2="300" y1="350" y2="350" spreadMethod="pad" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#58fd58"></stop>
        <stop offset="1" stop-color="#bcfebc"></stop>
    </linearGradient>
    <linearGradient id="d01" x1="50.526895979504275" x2="249.47310402049573" y1="232.1039093811567" y2="232.1039093811567"
        spreadMethod="pad" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#9f6de2"></stop>
        <stop offset="1" stop-color="#d9c5f3"></stop>
    </linearGradient>
    <linearGradient id="d02" x1="87.86675921993769" x2="212.1332407800623" y1="144.9775618201454" y2="144.9775618201454"
        spreadMethod="pad" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#43b5cb"></stop>
        <stop offset="1" stop-color="#b4e1ea"></stop>
    </linearGradient>
</defs>
<g id="legend">
    <rect id="r0" x="0" y="380" width="10" height="10" fill="#58fd58" stroke="#c0c0c0"></rect>
    <text id="h0" x="15" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Master</text>
    <rect id="r1" x="72.3125" y="380" width="10" height="10" fill="#9f6de2" stroke="#c0c0c0"></rect>
    <text id="h1" x="87.3125" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Sênior</text>
    <rect id="r2" x="140.65625" y="380" width="10" height="10" fill="#43b5cb" stroke="#c0c0c0"></rect>
    <text id="h2" x="155.65625" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Especialista</text>
    <rect id="r3" x="239.671875" y="380" width="10" height="10" fill="#ae9ff7" stroke="#c0c0c0"></rect>
    <text id="h3" x="254.671875" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Trainee</text>
    <rect id="r4" x="314.6875" y="380" width="10" height="10" fill="#48a68b" stroke="#c0c0c0"></rect>
    <text id="h4" x="329.6875" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Pleno</text>
    <rect id="r5" x="377.625" y="380" width="10" height="10" fill="#1ceb8f" stroke="#c0c0c0"></rect>
    <text id="h5" x="392.625" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Júnior</text>
</g>
<g id="g0">
    <path id="b00" stroke-linecap="butt" d="M2.33,345.17 L50.526895979504275,232.1039093811567 L249.47310402049573,232.1039093811567 L297.67,345.17 Z"
        fill="url(#d00)"></path>
    <text id="t00" x="277.73655201024786" y="289.22195469057834" transform="rotate(-30 277.73655201024786 289.22195469057834)"
        style="font-family:'Georgia';font-size:13px;" fill="#000000">33.68%</text>
    <path id="b01" stroke-linecap="butt" d="M52.85689597950427,227.2739093811567 L87.86675921993769,144.9775618201454 L212.1332407800623,144.9775618201454 L247.1431040204957,227.2739093811567 Z"
        fill="url(#d01)"></path>
    <text id="t01" x="233.80317240027904" y="186.71073560065102" transform="rotate(-30 233.80317240027904 186.71073560065102)"
        style="font-family:'Georgia';font-size:13px;" fill="#000000">24.89%</text>
    <path id="b02" stroke-linecap="butt" d="M90.19675921993769,140.1475618201454 L111.26041362796529,90.39236820141434 L188.7395863720347,90.39236820141434 L209.80324078006228,140.1475618201454 Z"
        fill="url(#d02)"></path>
    <text id="t02" x="203.4364135760485" y="115.85496501077988" transform="rotate(-30 203.4364135760485 115.85496501077988)"
        style="font-family:'Georgia';font-size:13px;" fill="#000000">15.60%</text>
    <path id="b03" stroke-linecap="butt" d="M113.59041362796529,85.56236820141434 L127.04032161180082,53.57258290579813 L172.95967838819917,53.57258290579813 L186.40958637203468,85.56236820141434 Z"
        fill="url(#d03)"></path>
    <text id="t03" x="183.84963238011696" y="70.15247555360627" transform="rotate(-30 183.84963238011696 70.15247555360627)"
        style="font-family:'Georgia';font-size:13px;" fill="#000000">10.52%</text>
    <path id="b04" stroke-linecap="butt" d="M129.37032161180082,48.74258290579813 L139.7985185672931,23.80345667631616 L160.2014814327069,23.80345667631616 L170.62967838819915,48.74258290579813 Z"
        fill="url(#d04)"></path>
    <text id="t04" x="169.58057991045303" y="36.85801979105712" transform="rotate(-30 169.58057991045303 36.85801979105712)"
        style="font-family:'Georgia';font-size:13px;" fill="#000000">8.51%</text>
    <path id="b05" stroke-linecap="butt" d="M142.1285185672931,18.97345667631616 L150,5.684341886080802e-14 L150,5.684341886080802e-14 L157.8714814327069,18.97345667631616 Z"
        fill="url(#d05)"></path>
    <text id="t05" x="158.10074071635344" y="10.07172833815808" transform="rotate(-30 158.10074071635344 10.07172833815808)"
        style="font-family:'Georgia';font-size:13px;" fill="#000000">6.80%</text>
  </g>
</svg>

编辑：编辑了代码以提高可视化效果。

EDIT2 ：修复了属性上的拼写错误。

EDIT3 ：我在svg上插入对象后，通过使用transform = "translate(x, y)"属性设法解决了这个问题。为此，我计算了viewBox的平均宽度和高度位置，并设置为x和y参数。

Answer 1

要使preserveAspectRatio正常工作，viewBox需要准确描述SVG中内容的范围。您当前的1400x1000边界框方式太大。

如果我们将其降低到更正确的程度，你会发现事情会更好。

见下文：

svg {
  width: 100%;
  height: 300px;
  border: solid 1px red;
}

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 -20 440 420"
xml:space="preserve">
<defs id="def">
    <linearGradient id="d00" x1="0" x2="300" y1="350" y2="350" spreadMethod="pad" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#58fd58"></stop>
        <stop offset="1" stop-color="#bcfebc"></stop>
    </linearGradient>
    <linearGradient id="d01" x1="50.526895979504275" x2="249.47310402049573" y1="232.1039093811567" y2="232.1039093811567"
        spreadMethod="pad" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#9f6de2"></stop>
        <stop offset="1" stop-color="#d9c5f3"></stop>
    </linearGradient>
    <linearGradient id="d02" x1="87.86675921993769" x2="212.1332407800623" y1="144.9775618201454" y2="144.9775618201454"
        spreadMethod="pad" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#43b5cb"></stop>
        <stop offset="1" stop-color="#b4e1ea"></stop>
    </linearGradient>
</defs>
<g id="legend">
    <rect id="r0" x="0" y="380" width="10" height="10" fill="#58fd58" stroke="#c0c0c0"></rect>
    <text id="h0" x="15" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Master</text>
    <rect id="r1" x="72.3125" y="380" width="10" height="10" fill="#9f6de2" stroke="#c0c0c0"></rect>
    <text id="h1" x="87.3125" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Sênior</text>
    <rect id="r2" x="140.65625" y="380" width="10" height="10" fill="#43b5cb" stroke="#c0c0c0"></rect>
    <text id="h2" x="155.65625" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Especialista</text>
    <rect id="r3" x="239.671875" y="380" width="10" height="10" fill="#ae9ff7" stroke="#c0c0c0"></rect>
    <text id="h3" x="254.671875" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Trainee</text>
    <rect id="r4" x="314.6875" y="380" width="10" height="10" fill="#48a68b" stroke="#c0c0c0"></rect>
    <text id="h4" x="329.6875" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Pleno</text>
    <rect id="r5" x="377.625" y="380" width="10" height="10" fill="#1ceb8f" stroke="#c0c0c0"></rect>
    <text id="h5" x="392.625" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Júnior</text>
</g>
<g id="g0">
    <path id="b00" stroke-linecap="butt" d="M2.33,345.17 L50.526895979504275,232.1039093811567 L249.47310402049573,232.1039093811567 L297.67,345.17 Z"
        fill="url(#d00)"></path>
    <text id="t00" x="277.73655201024786" y="289.22195469057834" transform="rotate(-30 277.73655201024786 289.22195469057834)"
        style="font-family:'Georgia';font-size:13px;" fill="#000000">33.68%</text>
    <path id="b01" stroke-linecap="butt" d="M52.85689597950427,227.2739093811567 L87.86675921993769,144.9775618201454 L212.1332407800623,144.9775618201454 L247.1431040204957,227.2739093811567 Z"
        fill="url(#d01)"></path>
    <text id="t01" x="233.80317240027904" y="186.71073560065102" transform="rotate(-30 233.80317240027904 186.71073560065102)"
        style="font-family:'Georgia';font-size:13px;" fill="#000000">24.89%</text>
    <path id="b02" stroke-linecap="butt" d="M90.19675921993769,140.1475618201454 L111.26041362796529,90.39236820141434 L188.7395863720347,90.39236820141434 L209.80324078006228,140.1475618201454 Z"
        fill="url(#d02)"></path>
    <text id="t02" x="203.4364135760485" y="115.85496501077988" transform="rotate(-30 203.4364135760485 115.85496501077988)"
        style="font-family:'Georgia';font-size:13px;" fill="#000000">15.60%</text>
    <path id="b03" stroke-linecap="butt" d="M113.59041362796529,85.56236820141434 L127.04032161180082,53.57258290579813 L172.95967838819917,53.57258290579813 L186.40958637203468,85.56236820141434 Z"
        fill="url(#d03)"></path>
    <text id="t03" x="183.84963238011696" y="70.15247555360627" transform="rotate(-30 183.84963238011696 70.15247555360627)"
        style="font-family:'Georgia';font-size:13px;" fill="#000000">10.52%</text>
    <path id="b04" stroke-linecap="butt" d="M129.37032161180082,48.74258290579813 L139.7985185672931,23.80345667631616 L160.2014814327069,23.80345667631616 L170.62967838819915,48.74258290579813 Z"
        fill="url(#d04)"></path>
    <text id="t04" x="169.58057991045303" y="36.85801979105712" transform="rotate(-30 169.58057991045303 36.85801979105712)"
        style="font-family:'Georgia';font-size:13px;" fill="#000000">8.51%</text>
    <path id="b05" stroke-linecap="butt" d="M142.1285185672931,18.97345667631616 L150,5.684341886080802e-14 L150,5.684341886080802e-14 L157.8714814327069,18.97345667631616 Z"
        fill="url(#d05)"></path>
    <text id="t05" x="158.10074071635344" y="10.07172833815808" transform="rotate(-30 158.10074071635344 10.07172833815808)"
        style="font-family:'Georgia';font-size:13px;" fill="#000000">6.80%</text>
  </g>
</svg>