svgを使って袋文字を作りたいです。

Question

前提・実現したいこと

htmlとcssでの話になります。
svgを使って袋文字を作りたいです。

html

<svg>
<text class="back srd" x="10" y="50">テスト</text>
<text class="fore srd" x="10" y="50">テスト</text>
</svg>

css

svg {
  height: 60px;
  width: 160px;
  zoom: 2.25;
}

.srd{
  stroke-linejoin: round;
}

.fore{
  fill: #fff;
}
.back{
  stroke: #000;
  stroke-width: 2;
}

試したこと

svgを使うと
青い矢印の空間をなくしたいんです。svgのheightを小さくすると消えてしまったり、半分になったりしてうまくいきません。そもそも、その空間はなくせないものなのでしょうか....?

Answer 1

• textのy指定値が大きすぎる
• viewbox属性で表示範囲を調整する
• zoomは使わない

あたりで調整を書ければうまいこと描画できるのではないでしょうか。

下記ソースでは、テキストの描画領域にviewboxの大きさをフィットさせ、svg要素の大きさをviewboxのアスペクト比に合わせて拡大したものです。

<P>
  pre text
</P>
<div id="svgbox">
  <svg viewbox="0,0,70,30" preserveAspectRatio="xMinYMin">
    <text class="back srd" x="2" y="20">テスト</text>
    <text class="fore srd" x="2" y="20">テスト</text>
  </svg>
</div>
<P>
  post text
</P>

p{
  margin: 0;
  padding: 0;
}
svg {
  height: 60px;
  width: 140px;
}

.srd{
  font-size: 20px;
  stroke-linejoin: round;
}

.fore{
  fill: #fff;
}
.back{
  stroke: #000;
  stroke-width: 3;
}
.svg_hukuro {
  position: relative;
  height: 60px;
}

Comments

[hanayammmm]

すごいです...できました‼
もっと勉強したいと思います！ありがとうございました＾＾