Bord arrondi

Question

J'ai le SVG suivant :

<svg>
  <g>
    <path id="k9ffd8001" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke="#808600" stroke-width="0" transform="rotate(0 0 0)" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#a0a700"></path>
    <path id="kb8000001" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke="#808600" stroke-width="0" transform="rotate(0 0 0)" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="url(#k9ffb0001)"></path>
  </g>
</svg>

Je veux obtenir un effet de type CSS border-top-right-radius border-top-bottom-radius.

Comment puis-je obtenir cet effet de coin arrondi ?

Answer 1

J'envisagerais également d'utiliser un ancien <rect> qui fournit les attributs rx et ry

MDN SVG docs <- notez le second élément

redressé