Иконка SVG не будет правильно изменяться - PullRequest
Новая
       23

Иконка SVG не будет правильно изменяться

0 голосов
/ 04 декабря 2018

Я пытался изменить размер иконки в этом примере. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.2/tailwind.min.css" rel="stylesheet"/>
<div class="bg-indigo-dark">
           <div class="flex text-grey-lighter">
                    <svg class="flex-no-shrink fill-current" fill="none" xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 100 100" width="100px" height="100px">
                        <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
                    </svg>
                    <div class="leading-normal">
                       Some demo text
                    </div>
                </div>
  
</div>

Но, что бы я ни пытался, я не могу заставить svg изменить размер.Что я делаю не так?

Ответы [ 3 ]

0 голосов
/ 04 декабря 2018

Чтобы изменить размер значка, измените размер viewBox

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.2/tailwind.min.css" rel="stylesheet"/>
<div class="bg-indigo-dark">
           <div class="flex text-grey-lighter">
                    <svg class="flex-no-shrink fill-current" fill="none" xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 80 80" width="100px" height="100px">
                        <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
                    </svg>
                    <div class="leading-normal">
                       Some demo text
                    </div>
                </div>
  
</div>
0 голосов
/ 04 декабря 2018

Вам нужно сначала исправить окно просмотра - оно слишком большое.Это то, что дает вам дополнительную прокладку.Затем установите ширину и высоту по желанию.Смотрите фрагмент ниже: 

function changeHandler(event){
  var svg = document.getElementById('svg');
  svg.setAttribute("width", event.target.value + 'px');
  svg.setAttribute("height", event.target.value + 'px');
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.2/tailwind.min.css" rel="stylesheet" />
<input type="number" value="20" onchange="changeHandler(event)" />
<div class="bg-indigo-dark">
  <div class="flex text-grey-lighter">
    <svg id="svg" class="flex-no-shrink fill-current" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px">
      <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
    </svg>
    <div class="leading-normal">
      Some demo text
    </div>
  </div>

</div>
0 голосов
/ 04 декабря 2018

Это работает для меня путем изменения width и height в: 

<svg class="flex-no-shrink fill-current" fill="none" xmlns=
"http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="50px" height="50px">

https://jsfiddle.net/facechomp/58Lbqzh1/

...