@sembokulove (Missing place)posted at 2025-04-16

svgタグでtext-anchor="middle"としたのはいいけれど、文字の長体をかけたり、間隔を広げるとおかしくなる。

Q&A

解決したいこと

ここに解決したい内容を記載してください。

例）
Ruby on RailsでQiitaのようなWebアプリをつくっています。
記事を投稿する機能の実装中にエラーが発生しました。
解決方法を教えて下さい。

発生している問題・エラー

  <text class="zh11-2" text-anchor="middle" x="50%" y="100">香呂</text>
  と設定しており、普通ならtext-anchor="middle"で、中央になるはずです。
.zh11-2{
font-size:80pt;
transform:scale(1.2,1);
letter-spacing:1.1em;
}という風に、
toransform scaleは1.2:1、letter-spacingは1.1emと設定したところ、
中央ぞろえじゃなくなってしまいました。
何か策はないのでしょうか。
また、  
<text class="jp11-2" text-anchor="middle" x="43%" y="150">こうろ</text>
<text class="en11-2" text-anchor="middle" x="57.2%" y="150">Koro</text>
のこうろとKoroに対してもtransform scaleを別々に設定したい場合、やっぱりtextタグは2つ用いざるを得ないのでしょうかね。

例）

NameError (uninitialized constant World)

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

該当するソースコード

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=M+PLUS+1+Code:wght@700&family=M+PLUS+1:wght@100..900&family=M+PLUS+1p&family=M+PLUS+2:wght@100..900&family=M+PLUS+Rounded+1c&family=Mulish:ital,wght@0,900;1,900&family=Questrial&family=Zen+Kaku+Gothic+Antique&family=Zen+Kaku+Gothic+New&family=Zen+Maru+Gothic&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.cdnfonts.com/css/frutiger');
@font-face {
    font-family: 'Frutiger';
    font-style: normal;
    font-weight: 700;
    src: local('Frutiger'), url('https://fonts.cdnfonts.com/s/13615/Frutiger_bold.woff') format('woff');
}

@font-face {
 font-family: "GenEi Mono Gothic";
font-style: normal;
src: url('./GenEiMonogothic/GenEi Mono Gothic.ttf') format('ttf');
}
.zh11-2,.jp11-2,.en11-2,.rubi2,.container3{
font-family: "Frutiger LT Pro", "GenEi Mono Gothic", sans-serif;
    font-style: normal;
    font-weight: bold;
}
.zh11-2{
font-size:80pt;
transform:scale(1.2,1);
letter-spacing:1.1em;
text-indent:1.1em;
}
        .jp11-2{
        font-size:29pt;
        letter-spacing:0.1em;
        text-indent:0.1em;
        }
        .en11-2{
        font-size:28pt;
        }
        .rubi2{
        font-size:28pt;
        transform:scale(1.2,1);
        }
        .container2 {
            display: flex;
            justify-content: center;
            padding: 0 20pt;
            grid-column: 1 / span 3; /* ⇐これを追加 */
            position:relative;top:13pt;
        }
        .container3 {
            display: flex;
            justify-content: center;
            padding: 0 20pt;
            grid-column: 1 / span 3; /* ⇐これを追加 */
            position:relative;top:100pt;
        }
        .container1 > div {
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* テキストを左寄せに配置 */
            display: inline-block;
        }
        #arrowDisplay {
            grid-column: 1 / span 3; /* 中央に固定 */
            grid-row: 4;
            font-size: 30pt;
            display: flex;
            justify-content: space-between; /* 矢印を左右に配置 */
            position:relative;top:10pt;
        }
        .arrow {
            font-size: 18pt;
        }
        .container3 {
            display: flex;
            justify-content: space-between;
            padding: 0 20pt;
            grid-column: 1 / span 3; /* ⇐これを追加 */
            position:relative;top:-23pt;
        }
        .container3 > div {
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* テキストを左寄せに配置 */
            display: inline-block;
        }
</style>
<div style="StationBoad-test11">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100%, 300" width="100%" height="600">
  <text class="zh11-2" text-anchor="middle" x="46%" y="100">香呂</text>
  <text class="jp11-2" text-anchor="middle" x="43%" y="150">こうろ</text>
  <text class="en11-2" text-anchor="middle" x="57.2%" y="150">Koro</text>
  <foreignObject class="test" x="0" y="0" width="100%" height="300">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <div id="arrowDisplay">
            <div id="leftArrow" class="arrow">←</div>
            <div id="rightArrow" class="arrow">→</div>
        </div>
        <div class="container3">
            <div class="station">
                <div id="previousStationDisplay">みかん</div>
                <div id="previousStationRomanDisplay">orange</div>
            </div>
            <div class="station">
                <div id="nextStationDisplay">バナナ</div>
                <div id="nextStationRomanDisplay">banana</div>
            </div></div>
    </html>
  </foreignObject>
</svg>
</div>
<div style="StationBoad-test11">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100%, 300" width="100%" height="600">
<text text-anchor="middle" x="50%" y="75">A</text>
  <text class="zh11-2" text-anchor="middle" x="46%" y="100">甘地</text>
  <text class="jp11-2" text-anchor="middle" x="43%" y="150">あまじ</text>
  <text class="en11-2" text-anchor="middle" x="57.2%" y="150">Amaji</text>
  <foreignObject class="test" x="0" y="0" width="100%" height="300">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <div id="arrowDisplay">
            <div id="leftArrow" class="arrow">←</div>
            <div id="rightArrow" class="arrow">→</div>
        </div>
        <div class="container3">
            <div class="station">
                <div id="previousStationDisplay">みかん</div>
                <div id="previousStationRomanDisplay">orange</div>
            </div>
            <div class="station">
                <div id="nextStationDisplay">バナナ</div>
                <div id="nextStationRomanDisplay">banana</div>
            </div></div>
    </html>
  </foreignObject>
</svg>
</div>
<div style="StationBoad-test11">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100%, 300" width="100%" height="600">
  <text class="zh11-2" text-anchor="middle" x="46%" y="200">甘地</text>
  <text class="rubi2" text-anchor="middle" x="47.8%" y="250">あまじ&nbsp;&nbsp;&nbsp;Amaji</text>
  <foreignObject class="test" x="0" y="0" width="100%" height="300">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <div id="arrowDisplay">
            <div id="leftArrow" class="arrow">←</div>
            <div id="rightArrow" class="arrow">→</div>
        </div>
        <div class="container3">
            <div class="station">
                <div id="previousStationDisplay">みかん</div>
                <div id="previousStationRomanDisplay">orange</div>
            </div>
            <div class="station">
                <div id="nextStationDisplay">バナナ</div>
                <div id="nextStationRomanDisplay">banana</div>
            </div></div>
    </html>
  </foreignObject>
</svg>
</div>

例）

def greet
  puts Hello World
end

自分で試したこと

ここに問題・エラーに対して試したことを記載してください。

1 likes

Are you sure you want to delete the question?

svgタグでtext-anchor="middle"としたのはいいけれど、文字の長体をかけたり、間隔を広げるとおかしくなる。

解決したいこと

発生している問題・エラー

該当するソースコード

自分で試したこと

2Answer

1. 正しいフォーマットで質問を書きましょう！

2. 回答者や開発者には敬意を払いましょう！

Comments

Your answer might help someone💌