在SVG背景矩形中安装SVG文本

Question

下面是一个包含两个SVG的框。一个用于文本，另一个用于背景矩形。

我想要适应背景矩形内的文本。这样就不会有文本从背景矩形延伸出来。(请注意，我不想打断文本，我想要减少文本的尺寸，或者使矩形内的文本在一行中适合)；

我尝试了很多没有运气的解决方案，我认为可能没有纯粹的CSS解决方案，所以即使Javascript也可以解决这个连线问题。

注意:我真的需要文本和背景矩形作为SVGs。

这是CodePen。

这是密码：

​

@font-face {
  font-family: "Heebo-Light";
  src: url(Heebo-Light.ttf) format("truetype");
}

svg {
    position: relative;
    display: block;
    overflow: visible;
    pointer-events: none;
}

body {
  background-color: #FDFDFD;
  overflow: hidden;
}

.box svg:nth-of-type(1) {
  position: absolute;
  z-index: 3;
}

.box svg:nth-of-type(2) {
  position: absolute;
  z-index: 2;
}

.box, svg {
  max-width: 100%;
  max-height: 2.59vw;
}

.box {
  position: relative;
  height: 2.59vw;
}

<div id="box-13" class="box" style="width: 35.0663246486498vw;">
   <svg height="100%" width="100%" viewBox="0 0 100 45">
      <text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
         <tspan id="span-15">This is a long text that should be fit This is a long text that should be fit This is a long text that should be fit</tspan>
      </text>
   </svg>
   <svg height="100%" width="100%" viewBox="0 0 272 45" preserveAspectRatio="none">
      <defs>
         <linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomIdA-4">
            <stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
            <stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
            <stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
            <stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
         </linearGradient>
         <filter id="uniqueDomIdB-4" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
            <feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
            <feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
            </feGaussianBlur>
            <feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
         </filter>
      </defs>
      <use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomIdC-4" filter="url(#uniqueDomIdB-4)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{&quot;type&quot;:&quot;translate&quot;,&quot;args&quot;:[-2.72,-0.45]},{&quot;type&quot;:&quot;scale&quot;,&quot;args&quot;:[1.0199999809265137,1.0199999809265137]}]"></use>
      <g id="uniqueDomIdC-4">
         <g>
            <path d="M0,0L272,0 272,45 0,45z" fill="url(#uniqueDomIdA-4)"></path>
         </g>
      </g>
   </svg>
</div>

​

编辑：改变veiwBox似乎很有希望，但我不知道如何计算！我可以计算盒子的宽度，但我不知道如何找到viewBox.？

Answer 1

由于方框非常小，文本很长，所以文本将是珠子可见的。

在javascript中，我得到文本的长度：span15.getComputedTextLength()，我使用这个值作为viewBox属性

​

let text_length = span15.getComputedTextLength();

document.querySelector("#first").setAttribute("viewBox",`0 0 ${text_length} 45`)

@font-face {
  font-family: "Heebo-Light";
  src: url(Heebo-Light.ttf) format("truetype");
}

svg {
    position: relative;
    display: block;
    overflow: visible;
    pointer-events: none;
    outline:solid red;
}

body {
  background-color: #FDFDFD;
  overflow: hidden;
}
.box {
  position: relative;
  height: 2.59vw;
  outline:solid;
}

<div id="box-13" class="box" style="width: 35.0663246486498vw;">
   <svg id="first" viewBox="0 0 100 45">
      <text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
         <tspan id="span15">This is a long text that should be fit This is a long text that should be fit This is a long text that should be fit</tspan>
      </text>
   </svg>
  </div>

​

Answer 2

​

<div id="box-13" class="box" style="width: 35.0663246486498vw;">
  <svg height="100%" width="100%" viewBox="0 0 272 45" preserveAspectRatio="none">
      <defs>
         <linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomIdA-4">
            <stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
            <stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
            <stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
            <stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
         </linearGradient>
         <filter id="uniqueDomIdB-4" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
            <feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
            <feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
            </feGaussianBlur>
            <feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
         </filter>
      </defs>
      <use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomIdC-4" filter="url(#uniqueDomIdB-4)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{&quot;type&quot;:&quot;translate&quot;,&quot;args&quot;:[-2.72,-0.45]},{&quot;type&quot;:&quot;scale&quot;,&quot;args&quot;:[1.0199999809265137,1.0199999809265137]}]"></use>
      <g id="uniqueDomIdC-4">
         <g>
            <path d="M0,0L272,0 272,45 0,45z" fill="url(#uniqueDomIdA-4)"></path>
      <foreignObject
        x="0" y="0" width="100%" height="100%"
      >
          <p style="font-size: 1.8vw;line-height:1.2;text-align:center;">This is a long text that should be fit This is a long text that should be fit This is a long text that should be fit</p>
       
      </foreignObject>
         </g>
      </g>
   </svg>
</div>

​