Закругленный угол только на одной стороне svg <rect>

Я пытаюсь реализовать такую ​​диаграмму, как диаграмма. У меня есть следующий элемент html

<rect x="35" y="-135" width="10" height="51" style="stroke: rgb(255, 255, 255); opacity: 0.8; fill: rgb(255, 122, 0);"></rect>

Я хочу, чтобы верхний угол прямоугольника был закругленной формы. Как это возможно?
Я не могу применить свойство border-radius.

Ответы

Ответ 1

Как прокомментировал Роберт Лонгсон, вам нужно преобразовать ваш прямоугольный элемент в элемент пути, чтобы контролировать закругленные углы.

В следующем примере я использовал кубическую кривую Безье с командой Q чтобы сделать верхний левый закругленный угол (Q1 1 5 1 в атрибуте d):

svg{
  height:90vh;
  width:auto;
  }
<svg viewbox="0 0 10 50">
  <path d="M1 49 V5 Q1 1 5 1 H9 V49z"
        fill="rgba(255, 122, 0, 0.8)" />
</svg>

Ответ 2

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

Предполагая следующее:

  • ваш прямоугольник width="10" height="51"
  • верхний угол будет rx="5" и ry="5"

<svg>
        <defs>
            <clipPath id="round-corner">
                <rect x="0" y="0" width="10" height="56" rx="5" ry="5"/>
            </clipPath>
        </defs>

        <!-- if you want to use x="35" y="-135" put clip-path on a 'g' element --> 
        <rect width="10" 
              height="51" 
              clip-path="url(#round-corner)"
              style="stroke: rgb(255, 255, 255); opacity: 0.8; fill: rgb(255, 122, 0);"></rect>
    </svg>

Ответ 3

Используйте элемент <path> с помощью команды arc (http://devdocs.io/svg/attribute/d#arcto).

Синтаксис: a rx,ry x-axis-rotation large-arc-flag sweep-flag dx,dy

<svg width="200" height="200" viewBox="0 0 10 10">
  <path d="M0,8 v-3 a5,5 0 0 1 5,-5 h3 v8 z" />
</svg>