Я пытаюсь создать закругленные края, используя тег svg rect. Но rx и ry скругляют ребра по четырем ребрам. Вместо этого я пытаюсь создать только два ребра (вверху слева и вверху справа). То же самое я сделал с командой path (рабочая JS Fiddle).

Причина создания rect в том, что я пытаюсь создать анимационную высоту роста.

<rect x="50" y="0" fill="#f00" width="100" height="100">
    <animate attributeName="height" from="0" to="100" dur="0.5s" fill="freeze" />
</rect>

ИЗМЕНЕНО

Следующий код даст округленный угол, что я ожидал. Я использовал метод кубической кривой.

<svg style="width:500px; height:800px;">
    <path class="draw" d="M 75 445 L75 116.66666666666669 C 80 91.66666666666669 120 91.66666666666669 125 116.66666666666669 L125 445 75 445" style="stroke: rgb(192, 31, 31); stroke-width: 2px; fill: rgb(216, 62, 62);"></path>
</svg>

Мой вопрос / проблема в том, что когда я создаю анимацию в пути, высота не увеличивается с анимацией.

2
mkHun 28 Авг 2017 в 09:57

3 ответа

Лучший ответ

Вы можете использовать CSS3 scaleY() для создания нужной анимации.

Первоначально ваш path будет иметь значение scaleY(0) (он будет вести себя так, как если бы элемент имел height: 0), и мы будем анимировать его как scaleY(1).

Для этого потребуется следующий CSS:

path {
  transform: scaleY(0);
  transform-origin: center bottom;
  animation: draw 1.5s linear forwards;
}

@keyframes draw {
  to {
    transform: scaleY(1);
  }
}

Рабочая демонстрация:

.draw {
  animation: draw 1.5s linear forwards;
  transform-origin: center bottom;
  stroke: rgb(192, 31, 31);
  fill: rgb(216, 62, 62);
  transform: scaleY(0);
  stroke-width: 2px;
}

@keyframes draw {
  to {
    transform: scaleY(1);
  }
}
<svg width="400" height="200">
    <path class="draw"
          d="M 75 200 L75 25 C 80 0 120 0 125 25 L125 200 75 200" />
</svg>
6
Mohammad Usman 28 Авг 2017 в 10:55

Для закругленных углов только для верха вы можете использовать это в CSS

border-top-left-radius
border-top-right-radius

Вот пример ниже.

img{ width:100%;
height:100%;
border-top-left-radius:20px;
border-top-right-radius:20px;
}
<img src="http://wallpaperswide.com/download/color_splash_effect-wallpaper-1366x768.jpg">
0
user6366379user6366379 28 Авг 2017 в 07:49
<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;opacity:1" />
  <rect x="50" y="40" rx="0" ry="0" width="150" height="130" style="fill:red;opacity:1" />
  Sorry, your browser does not support inline SVG.
</svg>

Это немного сложно, и это сделает работу. Это пример, так что вы можете сделать то же самое со своим.

0
Sarath Hari 28 Авг 2017 в 07:24