Hier ist eine Box mit zwei SVGs. eine für den Text und eine für das Hintergrundrechteck.

Ich möchte den Text in das Hintergrundrechteck einpassen. Damit kein Text aus dem Hintergrundrechteck herausragt. (Beachten Sie, dass ich den Text nicht durch Zeilenumbrüche unterbrechen möchte. Ich möchte die Abmessungen des Texts verringern oder etwas, das dem Text innerhalb des Rechtecks ​​in einer einzelnen Zeile entspricht.)

Ich habe viele Lösungen ohne Glück ausprobiert und ich denke, dass es möglicherweise keine reinen CSS-Lösungen gibt. Daher wird auch Javascript zur Behebung dieses verkabelten Problems akzeptiert.

Hinweis: Ich brauche wirklich den Text und das Hintergrundrechteck, um SVGs zu sein.

Hier ist der CodePen.

Und hier ist der Code:

@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>

Bearbeiten: Das Ändern der veiwBox ​​scheint vielversprechend, aber ich habe keine Ahnung, wie ich es berechnen soll! Ich kann die Boxbreite berechnen, weiß aber nicht, wie ich viewBox finden kann ...?

2
Sara Ree 19 Aug. 2020 im 14:02

2 Antworten

Beste Antwort

Da das Feld sehr klein und der Text sehr lang ist, ist der Text gut sichtbar.

In Javascript erhalte ich die Länge des Textes: span15.getComputedTextLength() und verwende diesen Wert für das viewBox-Attribut

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>
2
enxaneta 19 Aug. 2020 im 11:53
<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>
1
ksav 19 Aug. 2020 im 11:26