Управление размерами SVG-иконки - PullRequest
0 голосов
/ 27 апреля 2020

У меня есть следующий файл SVG

<svg width="523" height="524" style='background-color: teal;' xmlns="http://www.w3.org/2000/svg">

    <symbol id="icon-ec2d25d9" viewBox="0 0 60 30">
     <g stroke="#000" fill="#fff">
     <path d="M0 0h60v60H0z" fill="#FFF"/>
     <path d="M0 0l30 37.1v-18l30 37.2" fill="none"/>
     </g>
     <g>
     <path fill="none" d="M-1-1h583v403H-1z"/>
     </g>
     </symbol>

  <path d="M85 84 127 84 127 126 85 126 "/> 
  <use href="#icon-ec2d25d9" x="85" y="84" width="22" height="36"  fill="none" stroke="black" class="icon 4"/>
</svg>

(https://jsfiddle.net/L5xz73j4/), и я хотел бы изменить размеры маленького значка внутри черного прямоугольника, чтобы он соответствовал ширине и высоте прямоугольник. Я генерирую такие SVG-файлы на лету, поэтому я не могу начать играть с атрибутами width и height вручную. Мой вопрос заключается в том, что я могу использовать элемент пути черного прямоугольника для достижения этого или как это сделать?

1 Ответ

1 голос
/ 27 апреля 2020

Я изменил viewBox символа на viewBox="0 0 60 60" в соответствии с размером группы внутри. Теперь символ квадратный. Чтобы использовать заливку черного квадрата, я изменил ширину и высоту использования на width="42" height="42", то есть размер черного квадрата.

Надеюсь, это то, что вы спрашиваете

<svg width="523" height="524" style='background-color: teal;' xmlns="http://www.w3.org/2000/svg">

    <symbol id="icon-ec2d25d9" viewBox="0 0 60 60">
     <g stroke="#000" fill="#fff">
     <path d="M0 0h60v60H0z"/>
     <path d="M0 0l30 37.1v-18l30 37.2" fill="none"/>
     </g>
     
     <!--<g><path fill="none" d="M-1-1h583v403H-1z"/></g>-->
     
     </symbol>

  <path d="M85 84 127 84 127 126 85 126 " /> 
  <use href="#icon-ec2d25d9" x="85" y="84" width="42" height="42"  fill="none" stroke="black" class="icon 4"/>
</svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...