Question

我想创建一个调整大小的svg“容器”（文本和红色背景），其大小应与父对象（蓝色背景）一样大。我希望调整文本和背景的大小。但是我没有找到调整文本和背景大小的解决方案。

背景调整大小，文本不调整大小。

   <!-- Item 1 -->
      <div class="grid-item-container">
          <div class="grid-item">
              <svg width="100%" height="100%" viewbox="0 0 100% 100%">
                  <rect x="0" y="0" width="100%" height="100%" fill="#c62828"></rect>
                  <text style="width: 100%; font-size: 20px;" x="0" y="20px" width="100%" height="100%" fill="white">Title</text>
              </svg>
          </div>
      </div>

调整文字大小，不调整背景。

        <!-- Item 2 -->
       <div class="grid-item-container">
            <div class="grid-item">
                <!-- Content (svg) -->
                <svg class="svg-main" width="100%" height="100%" viewbox="0 0 100 100">
                    <rect width="100%" height="100%" fill="#c62828"></rect>
                    <text style="font-size: 20px;" x="0" y="20px" width="100" height="100" fill="white">Resizing</text>
                </svg>
                <!-- Style (css) -->
                <div class="css-main">
                </div>
            </div>
        </div>

示例： https://codepen.io/michaelkonstreu/pen/wYGmpd

HTML / CSS / SVG-自适应文本和背景

0 个答案: