嵌套的SVG元素不尊重高度

1 回答

• 1

  我的理解是通过将viewBox的高度设置为300，我将画布的高度定义为300个单位 .

  不 . 你告诉浏览器SVG中的元素占用0到300区域 . 但实际上，图标只占用0到100之间的区域 . 浏览器无法知道你想要它扩大3倍 .

  这应该意味着将嵌套元素的高度设置为300，即高度的100％ .

  如果内部SVG没有 viewBox 属性，则设置内部 <svg> 的宽度和高度不会使其缩放以适合父SVG . 图标大约是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>
  

  另外，样式属性 top ， left 和 position 是HTML样式属性 . 它们对嵌套的SVG元素没有影响 .

  回复于 2024-05-20T09:22:37+08:00