SVG preserveAspectRatio不起作用

我正在動態繪製一個包含4個金字塔和圖例的圖形。我正在嘗試使用preserveAspectRatio = xMidYMid將其集中在頁面上，但它不起作用。我嘗試了一切！SVG preserveAspectRatio不起作用

有人可以幫助解決這個問題嗎？

<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>

EDIT：代碼被編輯，以更好地可視化。

EDIT2：固定的屬性拼寫錯誤。

EDIT3：我已經成功使用在SVG插入對象後transform = "translate(x, y)"屬性來解決這個問題。爲此，我計算了我的viewBox的平均寬度和高度位置，並將其設置爲x和y參數。

來源

2017-08-17 Alexandre Folquito

preserveAspectioRatio是一個錯字preserveAspectRatio是正確的拼寫。但無論如何拼寫它不在你的代碼中。 –

另外，它應該是'xMidYMid'。小'x'。 –

我沒有放在代碼中，因爲它不工作。另外，我已經測試過'preserveAspectRatio =「xMidYMid」'，但還沒有工作。任何其他建議應該是什麼？ –

要使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>

來源

2017-08-18 05:53:50

SVG preserveAspectRatio不起作用

回答

相關問題