CSS增加svg字体大小自定义

Question

我正在使用如下的 svg 元素，我正在使用 css 来控制 svg 文本的字体大小。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">


    <rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
    <rect class="boundRect" x="70" y="70" width="1160" height="600" fill="none" stroke="green"></rect>

    <g class="bound" style="transform: translate(70px, 70px);">
        <g class="yAxis">
            <g class="yAxisLeft" fill="none" font-size="10" font-family="sans-serif" text-anchor="end">
                <g class="tick" opacity="1" transform="translate(0,411.7647058823529)">
                    <line stroke="currentColor" x2="1160"></line>
                    <text fill="currentColor" x="-3" dy="0.32em" transform="matrix(1 0 0 1 13.1462 0)" text-anchor="middle">20%</text>
                </g>
                <g class="tick" opacity="1" transform="translate(0,223.52941176470583)">
                    <line stroke="currentColor" x2="1160"></line>
                    <text fill="currentColor" x="-3" dy="0.32em" transform="matrix(1 0 0 1 13.1462 0)" text-anchor="middle">40%</text>
                </g>
                <g class="tick" opacity="1" transform="translate(0,35.29411764705883)">
                    <line stroke="currentColor" x2="1160"></line>
                    <text fill="currentColor" x="-3" dy="0.32em" text-anchor="middle" transform="matrix(1 0 0 1 12.3462 0)">60%</text>
                </g>
            </g>
        </g>
    </g>
</svg>

然而，当我增加font-size时，例如

.tick>text{
font-size: xx-large;
}

变成这样

我是否可以增加 font-size，但文本会与 green 行对齐？像下面

作为替代方案，我尝试了以下方法

.tick>text{
    transform-origin: left;
    transform-box: fill-box;
    transform: scaleY(2.5);
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">


    <rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
    <rect class="boundRect" x="70" y="70" width="1160" height="600" fill="none" stroke="green"></rect>

    <g class="bound" style="transform: translate(70px, 70px);">
        <g class="yAxis">
            <g class="yAxisLeft" fill="none" font-size="10" font-family="sans-serif" text-anchor="end">
                <g class="tick" opacity="1" transform="translate(0,411.7647058823529)">
                    <line stroke="currentColor" x2="1160"></line>
                    <text fill="currentColor" x="-3" dy="0.32em" transform="matrix(1 0 0 1 13.1462 0)" text-anchor="middle">20%</text>
                </g>
                <g class="tick" opacity="1" transform="translate(0,223.52941176470583)">
                    <line stroke="currentColor" x2="1160"></line>
                    <text fill="currentColor" x="-3" dy="0.32em" transform="matrix(1 0 0 1 13.1462 0)" text-anchor="middle">40%</text>
                </g>
                <g class="tick" opacity="1" transform="translate(0,35.29411764705883)">
                    <line stroke="currentColor" x2="1160"></line>
                    <text fill="currentColor" x="-3" dy="0.32em" text-anchor="middle" transform="matrix(1 0 0 1 12.3462 0)">60%</text>
                </g>
            </g>
        </g>
    </g>
</svg>

.tick>text{
    transform-origin: left;
    transform-box: fill-box;
    transform: scaleY(2.5);
}

但它没有从所需的原点应用缩放。

Answer 1

尝试将测试定位在 x="0" 而不是 x="-3"。同时删除 transform 和 test-anchor="middle/end" 属性。

.tick>text{
    transform-origin: left;
    transform-box: fill-box;
    transform: scaleY(2.5);
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">


    <rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
    <rect class="boundRect" x="70" y="70" width="1160" height="600" fill="none" stroke="green"></rect>

    <g class="bound" style="transform: translate(70px, 70px);">
        <g class="yAxis">
            <g class="yAxisLeft" fill="none" font-size="10" font-family="sans-serif">
                <g class="tick" opacity="1" transform="translate(0,411.7647058823529)">
                    <line stroke="currentColor" x2="1160"></line>
                    <text fill="currentColor" x="0" dy="0.32em">20%</text>
                </g>
                <g class="tick" opacity="1" transform="translate(0,223.52941176470583)">
                    <line stroke="currentColor" x2="1160"></line>
                    <text fill="currentColor" x="0" dy="0.32em">40%</text>
                </g>
                <g class="tick" opacity="1" transform="translate(0,35.29411764705883)">
                    <line stroke="currentColor" x2="1160"></line>
                    <text fill="currentColor" x="0" dy="0.32em">60%</text>
                </g>
            </g>
        </g>
    </g>
</svg>

CSS增加svg字体大小自定义

CSS to increase svg font size custom

css

svg