CSS增加svg字體大小自定義

我正在使用如下的 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);
}

但它沒有從所需的原點應用縮放。

uj5u.com熱心網友回復：

嘗試將您的測驗定位在x="0"而不是x="-3". 同時洗掉transformandtest-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

上一篇：如何使用animateMotion更改svg影像的起始位置？

下一篇：用于訪問svgtransformtranslate的x/y值的Javascript