Как увеличить высоту изображения SVG в CSS? - PullRequest
Новая
       72

Как увеличить высоту изображения SVG в CSS?

0 голосов
/ 24 апреля 2019

Я работаю над svg image (как показано на скриншоте, отмеченном стрелкой с четырьмя треугольниками) HTML-код , как показано ниже, принадлежащее веб-странице, на которой я хочу увеличить его высоту .

enter image description here

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
   <style>.path-one,.path-two{fill-rule:evenodd;clip-rule:evenodd;fill:#00afc9}.path-two{opacity:.4;fill:#93c83d}</style>
   <path class="path-one" d="M30 30H0V0"></path>
   <path class="path-two" d="M0 30V0h30"></path>
</svg>

Я попытался добавить встроенные width="150px" и height="150px" в тег svg, нопохоже, это не работает.

Постановка проблемы:

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

Ответы [ 3 ]

2 голосов
/ 30 апреля 2019

Вы можете достичь того же результата, используя CSS, и с ним будет проще работать: 

.box {
  display:inline-block;
  width:150px;
  height:150px;
  background:
    linear-gradient(to top left   ,transparent 49.3%,rgb(147, 200, 61,0.4) 50%),
    linear-gradient(to bottom left,transparent 49.3%,#00afc9 50%);
}
<div class="box">

</div>

Вы также можете интегрировать его в качестве фона для своей черной полосы: 

.box {
  height:60px;
  background:
    linear-gradient(to top left   ,transparent 49.3%,rgb(147, 200, 61,0.4) 50%),
    linear-gradient(to bottom left,transparent 49.3%,#00afc9 50%),
    #000;
  background-size:60px 100%;
  background-repeat:no-repeat;
}
<div class="box">

</div>
2 голосов
/ 24 апреля 2019

примените его к элементу svg: 

svg { width: 150px; height: 150px }
0 голосов
/ 24 апреля 2019

Обратите внимание, что изображение svg фактически принимает высоту и ширину, которые вы хотите установить, используя только свойства высоты и ширины.Проблема, однако, заключается в ваших путях.Вы можете добавить background-color к элементу svg, чтобы убедиться, что он действительно изменяет высоту и ширину.

<svg xmlns="http://www.w3.org/2000/svg" height="300" width="150" 
viewBox="0 0 30 
30" enable-background="new 0 0 311.7 311.5">
<path fill="red" class="path-one" d="M30 30H0V0"></path>
<path fill="blue" class="path-two" d="M0 30V0h30"></path>
</svg>

 <!-- CSS Code-->
<style>
svg {
  background-color: black;
}
</style>

Удобный веб-сайт для быстрой работы с SVG-изображениями: https://www.rapidtables.com/web/tools/svg-viewer-editor.html

Используйте его с умом.

...