2017-10-21 59 views
0

我對SVG相當陌生,所以可能在這裏犯了一個明顯的錯誤。不兼容高度的嵌套SVG元素

我試圖讓嵌套#custom_logo元素尊重我給它的高度和寬度屬性。我的理解是,通過將viewBox的高度設置爲300,我已將畫布的高度定義爲300個單位。這應該意味着將嵌套元素的高度設置爲300,即100%的高度。

然而,元素似乎並不在乎我設置其高度和寬度 - 它們對渲染沒有影響。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" viewBox="0 0 600 300" width="600" height="300"> 
 
    <defs id="SvgjsDefs1001"/> 
 
    <svg id="SvgjsSvg1002" width="2" height="0" style="overflow: hidden; top: -100%; left: -100%; position: absolute; opacity: 0"> 
 
    <polyline id="SvgjsPolyline1003" points="0,0"/> 
 
    <path id="SvgjsPath1004" d="M0 0 "/> 
 
    </svg> 
 
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" id="custom_logo" version="1.1" x="0px" y="0px" enable-background="new 0 0 100 100" xml:space="preserve" width="297.583909163781" height="300"> 
 
    <g> 
 
     <g> 
 
     <path d="M54.218,29.063c1.02,0,1.847-0.827,1.847-1.847s-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847 S53.198,29.063,54.218,29.063z M54.218,37.232c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847 s-1.847,0.827-1.847,1.847C52.371,36.405,53.198,37.232,54.218,37.232z M44.416,12.726c1.02,0,1.847-0.827,1.847-1.847 c0-1.02-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847C42.569,11.899,43.396,12.726,44.416,12.726z M54.218,53.569 c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847 C52.371,52.742,53.198,53.569,54.218,53.569z M54.218,12.726c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847 s-1.847,0.827-1.847,1.847C52.371,11.899,53.198,12.726,54.218,12.726z M54.218,45.401c1.02,0,1.847-0.827,1.847-1.847 s-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847S53.198,45.401,54.218,45.401z M73.823,45.401c1.02,0,1.847-0.827,1.847-1.847 s-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847S72.803,45.401,73.823,45.401z M64.021,53.569c1.02,0,1.847-0.827,1.847-1.847 c0-1.02-0.827-1.847-1.847-1.847c-1.02,0-1.847,0.827-1.847,1.847C62.174,52.742,63.001,53.569,64.021,53.569z M64.021,29.063 c1.02,0,1.847-0.827,1.847-1.847s-0.827-1.847-1.847-1.847c-1.02,0-1.847,0.827-1.847,1.847S63.001,29.063,64.021,29.063z  M83.625,53.569c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847 C81.779,52.742,82.605,53.569,83.625,53.569z M73.823,53.569c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847 s-1.847,0.827-1.847,1.847C71.976,52.742,72.803,53.569,73.823,53.569z M64.021,37.232c1.02,0,1.847-0.827,1.847-1.847 c0-1.02-0.827-1.847-1.847-1.847c-1.02,0-1.847,0.827-1.847,1.847C62.174,36.405,63.001,37.232,64.021,37.232z M64.021,45.401 c1.02,0,1.847-0.827,1.847-1.847s-0.827-1.847-1.847-1.847c-1.02,0-1.847,0.827-1.847,1.847S63.001,45.401,64.021,45.401z  M54.218,20.895c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847 C52.371,20.068,53.198,20.895,54.218,20.895z M24.811,45.401c1.02,0,1.847-0.827,1.847-1.847s-0.827-1.847-1.847-1.847 c-1.02,0-1.847,0.827-1.847,1.847S23.791,45.401,24.811,45.401z M34.613,53.569c1.02,0,1.847-0.827,1.847-1.847 c0-1.02-0.827-1.847-1.847-1.847c-1.02,0-1.847,0.827-1.847,1.847C32.766,52.742,33.593,53.569,34.613,53.569z M34.613,45.401 c1.02,0,1.847-0.827,1.847-1.847s-0.827-1.847-1.847-1.847c-1.02,0-1.847,0.827-1.847,1.847S33.593,45.401,34.613,45.401z  M24.811,53.569c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847c-1.02,0-1.847,0.827-1.847,1.847 C22.964,52.742,23.791,53.569,24.811,53.569z M15.008,53.569c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847 s-1.847,0.827-1.847,1.847C13.162,52.742,13.989,53.569,15.008,53.569z M90.098,60.348c-0.501-0.451-1.23-0.548-1.833-0.244 c-7.634,3.858-16.75,3.858-24.385-0.002c-0.269-0.136-0.567-0.182-0.86-0.16c-0.514-0.05-1.003,0.143-1.34,0.5 c-3.577,1.675-7.522,2.568-11.47,2.568c-0.002,0-0.005,0-0.005,0c-0.07,0-0.137,0.012-0.204,0.021 c-0.068-0.009-0.134-0.021-0.204-0.021c-0.002,0-0.003,0-0.005,0c-3.944,0-7.886-0.891-11.47-2.568 c-0.336-0.356-0.822-0.549-1.334-0.501c-0.295-0.024-0.595,0.023-0.866,0.161c-7.634,3.859-16.75,3.86-24.315,0.04 c-0.598-0.342-1.349-0.271-1.873,0.178c-0.524,0.449-0.71,1.179-0.463,1.824l10.619,27.773c0.242,0.633,0.849,1.051,1.526,1.051 h28.181c0.07,0,0.137-0.012,0.205-0.021c0.068,0.009,0.135,0.021,0.205,0.021h28.181c0.677,0,1.284-0.418,1.526-1.051 l10.619-27.773C90.772,61.513,90.599,60.8,90.098,60.348z M22.739,87.7l-8.846-23.136c7.141,2.496,15.046,2.233,22.033-0.774 L40.849,87.7H22.739z M50.205,87.7c-0.07,0-0.137,0.012-0.205,0.021c-0.068-0.009-0.135-0.021-0.205-0.021h-5.611l-4.792-23.276 c3.326,1.213,6.861,1.854,10.398,1.854c0.002,0,0.004,0,0.006,0c0.07,0,0.136-0.012,0.204-0.021 c0.068,0.008,0.134,0.021,0.204,0.021c0.002,0,0.004,0,0.006,0c3.543,0,7.083-0.643,10.398-1.852L55.816,87.7H50.205z  M77.262,87.7h-18.11l4.923-23.911c6.987,3.009,14.892,3.271,22.033,0.775L77.262,87.7z M44.416,29.063 c1.02,0,1.847-0.827,1.847-1.847s-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847S43.396,29.063,44.416,29.063z M44.416,37.232 c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847 C42.569,36.405,43.396,37.232,44.416,37.232z M44.416,20.895c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847 s-1.847,0.827-1.847,1.847C42.569,20.068,43.396,20.895,44.416,20.895z M34.613,37.232c1.02,0,1.847-0.827,1.847-1.847 c0-1.02-0.827-1.847-1.847-1.847c-1.02,0-1.847,0.827-1.847,1.847C32.766,36.405,33.593,37.232,34.613,37.232z M44.416,45.401 c1.02,0,1.847-0.827,1.847-1.847s-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847S43.396,45.401,44.416,45.401z M34.613,29.063 c1.02,0,1.847-0.827,1.847-1.847s-0.827-1.847-1.847-1.847c-1.02,0-1.847,0.827-1.847,1.847S33.593,29.063,34.613,29.063z  M44.416,53.569c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847 C42.569,52.742,43.396,53.569,44.416,53.569z"/> 
 
     </g> 
 
    </g> 
 
    </svg> 
 
    <text id="SvgjsText1007" font-family="Helvetica, Arial, sans-serif" x="307.583909163781" y="27.1015625" svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}">Heading</text> 
 
    <text id="SvgjsText1008" font-family="Helvetica, Arial, sans-serif" x="307.583909163781" y="43.1015625" svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}">Slogan</text> 
 
</svg>

+0

哪些元素似乎不關心寬度和高度設置? – swatchai

回答

1

我的理解是,通過視框的高度設置爲300,我定義畫布的高度爲300個單位。

不是。您告訴瀏覽器SVG中的元素佔用0到300的區域。但實際上,圖標只佔用0到100的區域。瀏覽器沒有辦法知道你想要它擴大了3倍。

這應該意味着將嵌套元素的高度設置爲300,即100%的高度。

設置內<svg>的寬度和高度不會讓它擴展到適合父SVG如果內SVG沒有viewBox屬性。該圖標是100x100的約,所以適當的viewBox是:

viewBox="0 0 100 100" 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" viewBox="0 0 600 300" width="600" height="300"> 
 
    <defs id="SvgjsDefs1001"/> 
 
    <svg id="SvgjsSvg1002" width="2" height="0" style="overflow: hidden; opacity: 0"> 
 
    <polyline id="SvgjsPolyline1003" points="0,0"/> 
 
    <path id="SvgjsPath1004" d="M0 0 "/> 
 
    </svg> 
 
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" id="custom_logo" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" xml:space="preserve" width="297.583909163781" height="300"> 
 
    <g> 
 
     <g> 
 
     <path d="M54.218,29.063c1.02,0,1.847-0.827,1.847-1.847s-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847 S53.198,29.063,54.218,29.063z M54.218,37.232c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847 s-1.847,0.827-1.847,1.847C52.371,36.405,53.198,37.232,54.218,37.232z M44.416,12.726c1.02,0,1.847-0.827,1.847-1.847 c0-1.02-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847C42.569,11.899,43.396,12.726,44.416,12.726z M54.218,53.569 c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847 C52.371,52.742,53.198,53.569,54.218,53.569z M54.218,12.726c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847 s-1.847,0.827-1.847,1.847C52.371,11.899,53.198,12.726,54.218,12.726z M54.218,45.401c1.02,0,1.847-0.827,1.847-1.847 s-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847S53.198,45.401,54.218,45.401z M73.823,45.401c1.02,0,1.847-0.827,1.847-1.847 s-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847S72.803,45.401,73.823,45.401z M64.021,53.569c1.02,0,1.847-0.827,1.847-1.847 c0-1.02-0.827-1.847-1.847-1.847c-1.02,0-1.847,0.827-1.847,1.847C62.174,52.742,63.001,53.569,64.021,53.569z M64.021,29.063 c1.02,0,1.847-0.827,1.847-1.847s-0.827-1.847-1.847-1.847c-1.02,0-1.847,0.827-1.847,1.847S63.001,29.063,64.021,29.063z  M83.625,53.569c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847 C81.779,52.742,82.605,53.569,83.625,53.569z M73.823,53.569c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847 s-1.847,0.827-1.847,1.847C71.976,52.742,72.803,53.569,73.823,53.569z M64.021,37.232c1.02,0,1.847-0.827,1.847-1.847 c0-1.02-0.827-1.847-1.847-1.847c-1.02,0-1.847,0.827-1.847,1.847C62.174,36.405,63.001,37.232,64.021,37.232z M64.021,45.401 c1.02,0,1.847-0.827,1.847-1.847s-0.827-1.847-1.847-1.847c-1.02,0-1.847,0.827-1.847,1.847S63.001,45.401,64.021,45.401z  M54.218,20.895c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847 C52.371,20.068,53.198,20.895,54.218,20.895z M24.811,45.401c1.02,0,1.847-0.827,1.847-1.847s-0.827-1.847-1.847-1.847 c-1.02,0-1.847,0.827-1.847,1.847S23.791,45.401,24.811,45.401z M34.613,53.569c1.02,0,1.847-0.827,1.847-1.847 c0-1.02-0.827-1.847-1.847-1.847c-1.02,0-1.847,0.827-1.847,1.847C32.766,52.742,33.593,53.569,34.613,53.569z M34.613,45.401 c1.02,0,1.847-0.827,1.847-1.847s-0.827-1.847-1.847-1.847c-1.02,0-1.847,0.827-1.847,1.847S33.593,45.401,34.613,45.401z  M24.811,53.569c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847c-1.02,0-1.847,0.827-1.847,1.847 C22.964,52.742,23.791,53.569,24.811,53.569z M15.008,53.569c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847 s-1.847,0.827-1.847,1.847C13.162,52.742,13.989,53.569,15.008,53.569z M90.098,60.348c-0.501-0.451-1.23-0.548-1.833-0.244 c-7.634,3.858-16.75,3.858-24.385-0.002c-0.269-0.136-0.567-0.182-0.86-0.16c-0.514-0.05-1.003,0.143-1.34,0.5 c-3.577,1.675-7.522,2.568-11.47,2.568c-0.002,0-0.005,0-0.005,0c-0.07,0-0.137,0.012-0.204,0.021 c-0.068-0.009-0.134-0.021-0.204-0.021c-0.002,0-0.003,0-0.005,0c-3.944,0-7.886-0.891-11.47-2.568 c-0.336-0.356-0.822-0.549-1.334-0.501c-0.295-0.024-0.595,0.023-0.866,0.161c-7.634,3.859-16.75,3.86-24.315,0.04 c-0.598-0.342-1.349-0.271-1.873,0.178c-0.524,0.449-0.71,1.179-0.463,1.824l10.619,27.773c0.242,0.633,0.849,1.051,1.526,1.051 h28.181c0.07,0,0.137-0.012,0.205-0.021c0.068,0.009,0.135,0.021,0.205,0.021h28.181c0.677,0,1.284-0.418,1.526-1.051 l10.619-27.773C90.772,61.513,90.599,60.8,90.098,60.348z M22.739,87.7l-8.846-23.136c7.141,2.496,15.046,2.233,22.033-0.774 L40.849,87.7H22.739z M50.205,87.7c-0.07,0-0.137,0.012-0.205,0.021c-0.068-0.009-0.135-0.021-0.205-0.021h-5.611l-4.792-23.276 c3.326,1.213,6.861,1.854,10.398,1.854c0.002,0,0.004,0,0.006,0c0.07,0,0.136-0.012,0.204-0.021 c0.068,0.008,0.134,0.021,0.204,0.021c0.002,0,0.004,0,0.006,0c3.543,0,7.083-0.643,10.398-1.852L55.816,87.7H50.205z  M77.262,87.7h-18.11l4.923-23.911c6.987,3.009,14.892,3.271,22.033,0.775L77.262,87.7z M44.416,29.063 c1.02,0,1.847-0.827,1.847-1.847s-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847S43.396,29.063,44.416,29.063z M44.416,37.232 c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847 C42.569,36.405,43.396,37.232,44.416,37.232z M44.416,20.895c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847 s-1.847,0.827-1.847,1.847C42.569,20.068,43.396,20.895,44.416,20.895z M34.613,37.232c1.02,0,1.847-0.827,1.847-1.847 c0-1.02-0.827-1.847-1.847-1.847c-1.02,0-1.847,0.827-1.847,1.847C32.766,36.405,33.593,37.232,34.613,37.232z M44.416,45.401 c1.02,0,1.847-0.827,1.847-1.847s-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847S43.396,45.401,44.416,45.401z M34.613,29.063 c1.02,0,1.847-0.827,1.847-1.847s-0.827-1.847-1.847-1.847c-1.02,0-1.847,0.827-1.847,1.847S33.593,29.063,34.613,29.063z  M44.416,53.569c1.02,0,1.847-0.827,1.847-1.847c0-1.02-0.827-1.847-1.847-1.847s-1.847,0.827-1.847,1.847 C42.569,52.742,43.396,53.569,44.416,53.569z"/> 
 
     </g> 
 
    </g> 
 
    </svg> 
 
    <text id="SvgjsText1007" font-family="Helvetica, Arial, sans-serif" x="307.583909163781" y="27.1015625" svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}">Heading</text> 
 
    <text id="SvgjsText1008" font-family="Helvetica, Arial, sans-serif" x="307.583909163781" y="43.1015625" svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}">Slogan</text> 
 
</svg>

順便說一句,樣式屬性topleft,並position是HTML樣式屬性。它們在嵌套的SVG元素中沒有效果。