Путь не подходит внутри SVG

Question

Я работаю с SVG с некоторого времени.Но все же я не могу понять окно просмотра после просмотра большого количества видео и чтения многих статей.

Я пытаюсь динамически генерировать 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, который предоставляет мне scrapbookElements:

[
  {
    "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"
    }
  }
]

Вот вывод:

Я могу справиться с этим с помощью overflow: visible в css.Но я не хочу этого делать, потому что тогда у меня будут проблемы с высотой и шириной, которые приведут меня к неправильному центрированию при использовании flexbox.

Вот коды и ящик, который воспроизводит проблему:

Нажмите здесь для кода песочница

Answer 1

Обычно, если вы хотите поместить SVG в контейнер, вам нужно установить для атрибута viewBox точные значения его содержимого.В этом случае из точек в атрибутах d вы можете видеть, что это 0 0 32 32 (например, x, y, width, height).

Затем вы можете изменить размер SVG, используя width и height атрибуты растягивания / сжатия для контейнера, в который вы хотите вписаться (конечно, с учетом соотношения сторон).

Если вы не знаете правильное значение viewBox дляданный SVG, и у вас нет штрихов - как в примерах выше, вы можете попробовать использовать инструменты dev в браузере и вызвать .getBBox() для элемента <svg>, который даст вам x, y, width ивысота для размещения в окне просмотра.

Answer 2

Чтобы получить размер пути, я преобразовал ваши иконки в истинный svg

console.log(test.getBBox());
console.log(test1.getBBox())

<svg className="svg" width="24" height="24" viewBox="0 0 32 32" >
  <g>
    <path id="test"
      d="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"
    />
  </g>
</svg>


<hr>

<svg className="svg" width="24" height="24" viewBox="0 0 32 32" >
  <g>
    <path id="test1"
      d="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"
    />
  </g>
</svg>

Затем я использовал метод .getBBox(), чтобы получить размер ограничивающих рамок для двух значков.В обоих случаях ширина и высота ограничительной рамки почти 32, а x и y равны 0. Я изменил viewBox на x y w h, то есть 0 0 32 32.Это уменьшит изображение внутри svg, а ширина и высота элемента svg останутся равными 24/24

.