html - 带有内部边框的svg边框 Angular

我有一个街区，有一些设计：

我有一些svg代码：

.box {
	position: relative;
	margin: .75em auto 0;
	max-width: 255px;
	min-height: 56px;
}

svg {
	position: absolute;
	width: 100%; height: 100%;
}

<div class='box'>
	<svg>
		<mask id='m' fill='#fff'>
			<rect id='r' width='256' height='56'/>
			<circle id='c' r='10' fill='#000'/>
			<use xlink:href='#c' x='100%'/>
			<use xlink:href='#c' y='100%'/>
			<use xlink:href='#c' x='100%' y='100%'/>
		</mask>

		<mask id='m2' fill='#fff'>
			<rect id='r2' width='248' height='50' x="4" y="4" />
			<circle id='c2' r='14' fill='#000' stroke='#000'/>
			<use xlink:href='#c2' x='100%' />
			<use xlink:href='#c2' y='100%'/>
			<use xlink:href='#c2' x='100%' y='100%'/>
		</mask>

		<use xlink:href='#r' fill='red' mask='url(#m)'/>
		<use xlink:href='#r2' fill='none' stroke="#000" mask='url(#m2)'/>
	</svg>
</div>

问：如何在一个块内用同样的圆角，但不是用实心填充和笔划？
备注：它应该能够编辑圆角半径，缩进vn。阻碍。也许在CSS上有一个简单的实现（最大跨浏览器），也会是合适的。

最佳答案

这个怎么样？只要改变<div class="box">的尺寸，它就可以适用于任何尺寸。

.box {
	position: relative;
	margin: .75em auto 0;
	width: 255px;
	height: 56px;
}

.box svg {
	position: absolute;
	width: 100%;
  height: 100%;
}

.size2 {
	width: 455px;
	height: 256px;
}

<div class="box">
  <svg width="100%" height="100%">
    <mask id="m" fill="#fff">
      <rect width="100%" height="100%"/>

      <rect width="100%" height="100%" fill="none" stroke="#000" stroke-width="12"/>
      <circle r="16" fill="#000"/>
      <circle cx="100%" r="16" fill="#000"/>
      <circle cy="100%" r="16" fill="#000"/>
      <circle cx="100%" cy="100%" r="16" fill="#000"/>

      <rect width="100%" height="100%" fill="none" stroke="#fff" stroke-width="8"/>
      <circle r="14" fill="#fff"/>
      <circle cx="100%" r="14" fill="#fff"/>
      <circle cy="100%" r="14" fill="#fff"/>
      <circle cx="100%" cy="100%" r="14" fill="#fff"/>

      <circle r="10" fill="#000"/>
      <circle cx="100%" r="10" fill="#000"/>
      <circle cy="100%" r="10" fill="#000"/>
      <circle cx="100%" cy="100%" r="10" fill="#000"/>
    </mask>

    <rect width="100%" height="100%" mask="url(#m)"/>
  </svg>
</div>