Zenn
🫥

カスタマイズした角丸の点線（レスポンシブ可）を実装する

2024/03/08に公開
CSS
HTML
SVG
tech

SVG画像を用意する

<svg
 xmlns="http://www.w3.org/2000/svg"
 preserveAspectRatio="none"
 viewBox="0 0 830 212"
>
<rect
 width="828"
 height="210"
 rx="13"
 fill="none"
 stroke="#fff"
 stroke-width="1"
 stroke-dasharray="4"
 vector-effect="non-scaling-stroke"
 transform="translate(1,1)"
/>
</svg>

ポイント

  1. rectのwidth heightをviewboxの値より2px小さくする。
    (線が外側に描画されるため)
  2. transform="translate(1,1)"で1pxずつずらして線をviewbox内に収める。
  3. vector-effect="non-scaling-stroke"で画像の縦横比に関係なく線を描画する。
    vector-effectについてはMDNに記載がある。https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/vector-effect
  4. preserveAspectRatio="none"で画像の縦横比を解除する。

CSSで背景画像として埋め込む

background: url(./../img/dashed.svg) no-repeat center / 100% 100%;

以上。
css標準のdashed線をscaleで拡大させていた時間は何だったんだろう。

Discussion