SVG в html размер увеличивается, когда не должен - PullRequest
0 голосов
/ 24 февраля 2020

Я впервые работаю с SVG. Я установил артборд с указанным c размером 60 х 70 пикселей или чем-то похожим на него, но когда я загружаю в браузер, его огромный

.st6 {
  fill: none;
  stroke: #4d4d4d;
  stroke-miterlimit: 10
}
<nav>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 60 70" xml:space="preserve">
    <path d="M54.49 70H5.51C2.47 70 0 67.53 0 64.49V5.51C0 2.47 2.47 0 5.51 0h48.98C57.53 0 60 2.47 60 5.51v58.98c0 3.04-2.47 5.51-5.51 5.51z" fill="gray" stroke="#4d4d4d" stroke-miterlimit="10"/>
    <path d="M52.44 66H7.56C5.59 66 4 64.41 4 62.44V7.56C4 5.59 5.59 4 7.56 4h44.88C54.41 4 56 5.59 56 7.56v54.88c0 1.97-1.59 3.56-3.56 3.56z" fill="none" stroke="#00f" stroke-width="2" stroke-miterlimit="10"/>
    <text transform="translate(11.528 19.33)" font-size="16" font-family="MyriadPro-Regular" fill="#fff">
        News
    </text>
    <path fill="none" stroke="gray" stroke-miterlimit="10" d="M30 65V46"/>
    <path class="st6" d="M5.5 46.5h49M30.5 64.5v-18"/>
    </svg>
</nav>

1 Ответ

0 голосов
/ 24 февраля 2020

Вам просто нужно установить ширину / высоту на вашем SVG

svg {
  width: 60px;
  height: 70px;
}
<nav>
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 60 70" xml:space="preserve">
              <style>
                .st6{fill:none;stroke:#4d4d4d;stroke-miterlimit:10}
              </style>
              <path d="M54.49 70H5.51C2.47 70 0 67.53 0 64.49V5.51C0 2.47 2.47 0 5.51 0h48.98C57.53 0 60 2.47 60 5.51v58.98c0 3.04-2.47 5.51-5.51 5.51z" fill="gray" stroke="#4d4d4d" stroke-miterlimit="10"/>
              <path d="M52.44 66H7.56C5.59 66 4 64.41 4 62.44V7.56C4 5.59 5.59 4 7.56 4h44.88C54.41 4 56 5.59 56 7.56v54.88c0 1.97-1.59 3.56-3.56 3.56z" fill="none" stroke="#00f" stroke-width="2" stroke-miterlimit="10"/>
              <text transform="translate(11.528 19.33)" font-size="16" font-family="MyriadPro-Regular" fill="#fff">
                News
              </text>
              <path fill="none" stroke="gray" stroke-miterlimit="10" d="M30 65V46"/>
              <path class="st6" d="M5.5 46.5h49M30.5 64.5v-18"/>
            </svg>
        </nav>

Таким образом, даже если вы можете установить артборд в фотошопе / иллюстраторе как 60 x 70 - когда он генерирует SVG, он фактически не устанавливает ширину или высоту. Поэтому, если вы не укажете его размер, он займет все доступное пространство.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...