css - 路径不适合 SVG

Question

我从现在开始使用 SVG。但是看了很多视频，看了很多文章，还是不懂viewbox。

我正在尝试动态生成 SVG:

import SvgIcon from '@material-ui/core/SvgIcon';

<SvgIcon className="svg" width="24" height="24" viewBox="0 0 24 24">
  <g>
    <path
      d={scrapbookElement.icon.path}
    />
  </g>
</SvgIcon>

这是我的 JSON 文件，它为我提供了剪贴簿元素:

[
  {
    "id": "image",
    "text": "Image",
    "icon": {
        "path": "M9.5999776,12.699997L11.899997,15.099998 13.299991,14.300003 19.000005,20 22.899999,18 28.299995,20.699997 28.299995,25.699997 3.5999767,25.699997 3.5999767,18.599998z M20.500005,11.699997L21.199987,11.699997 21.000005,12.800003 20.699987,12.800003z M23.09998,10.699997L23.799993,11.599998 23.59998,11.800003 22.699987,11.099998z M18.699987,10.699997L19.199987,11.199997 18.299993,11.900002 18.000005,11.599998z M23.59998,8.5999985L24.699987,8.8000031 24.699987,9 23.59998,9.1999969z M18.09998,8.5999985L18.09998,9.3000031 17.000005,9 17.000005,8.8000031z M20.799993,7C21.899999,7 22.699987,7.9000015 22.699987,8.9000015 22.699987,10 21.799993,10.800003 20.799993,10.800003 19.699987,10.800003 18.899999,9.9000015 18.899999,8.9000015 18.899999,7.8000031 19.799993,7 20.799993,7z M23.500005,6.0999985L23.699987,6.3000031 23.000005,7.1999969 22.500005,6.6999969z M18.199987,6.0999985L19.09998,6.8000031 18.59998,7.3000031 18.000005,6.3000031z M20.699987,5L21.000005,5 21.199987,6.0999985 20.500005,6.0999985z M2.1999823,2.4000015L2.1999823,26.800003 29.400001,26.800003 29.400001,2.4000015z M0,0L31.900001,0 31.900001,32 0,32z"
    }
  },
  {
    "id": "text",
    "text": "Text",
    "icon": {
        "path": "M29.15,0L30.186011,0.012001038 30.610999,0.43099976 31.096015,3.868 31.209998,7.8079987 31.101996,8.3949966 30.610999,8.6230011 29.875007,8.5510025 29.437018,7.9520035 28.312018,5.298996 26.993995,3.7130013 25.82801,3.072998 24.294013,2.6170006 22.390996,2.3429985 20.12,2.2509995 18.580998,2.3590012 17.940007,2.6829987 17.868993,3.0900002 17.868993,26.970001 18.048009,28.272003 18.58701,29.113998 19.659001,29.697998 21.437016,30.227997 22.149999,30.389 22.467015,30.490997 22.707005,31.401001 22.179997,32 21.910008,31.994003 21.198003,31.928001 15.424992,31.640999 10.755008,31.879997 9.4850186,31.879997 9.1740131,31.305 9.2879972,30.665001 10.011996,30.275002 11.737002,29.695 12.791018,29.005997 13.401005,27.909996 13.605015,26.298996 13.605015,3.0900002 13.390018,2.5390015 12.743014,2.2750015 12.342013,2.2579994 11.329989,2.2509995 7.3779925,2.6469994 4.6229872,3.8320007 3.0840158,5.4970016 1.7250066,8.1439972 1.2399907,8.7959976 0.598999,8.7900009 0.041992187,8.4729996 0,7.9039993 0.62899778,4.7839966 0.83898971,0.59899902 1.2040105,0.20999908 2.2999882,0.14400101 7.7489947,0.39500046 13.748997,0.47900009 19.16602,0.44900131 23.539008,0.35900116 26.867011,0.20999908z"
    }
  }
]

这是输出:

我可以用 css 中的 overflow: visible 来处理。但我不想这样做，因为那样我会遇到高度和宽度的问题，这将导致我使用 flexbox 不正确地居中。

这是重现问题的代码和框:

Click here for code sandbox

Answer 1

基本上，如果您想将 SVG 放入容器中，您需要设置 viewBox属性为其内容的精确值。在这种情况下，从 d 中的点属性你可以看到它是0 0 32 32 (如:x、y、宽度、高度)。

然后您可以使用 width 调整 SVG 的大小和 height拉伸(stretch)/收缩到您希望它适合的容器的属性(当然要考虑纵横比)。

如果您不知道 viewBox 的正确值对于给定的 SVG，并且您没有笔画 - 就像上面的示例一样，您可以尝试在浏览器中使用开发工具并调用 .getBBox()在 <svg> 上元素，它将为您提供放置在 viewBox 中的 x、y、宽度和高度。