Как сделать изменяемую высоту?

Question

cейчас если просто изменить - всё поломается

.label {
  position: relative;
  left: 59px; top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 140px; width: 448px;
  border-radius: 33px;
  text-decoration: none;
}

.label::before,
.label::after {
  content: "";
  position: absolute;
  z-index: -1;
  box-sizing: border-box;
  border: 4px solid #e7e6ec;
}

.label::before {
  top: 50%; right: 377px;
  height: 118px; width: 118px;
  border-radius: 33px;
  transform-origin: center;
  transform: translate(50%, -50%) rotate(-45deg);
  background-image: radial-gradient( circle at 1.6em 1.6em, #615e8d 0.6em, #fff 0.65em);
}

.label::after {
  top: 0; right: 0;
  height: 140px; width: 377px;
  border-left-width: 0;
  border-radius: 0 33px 33px 0;
  background-color: #fff;
}

.label>span {
  font: 24px/1.3em sans-serif;
  color: #000;
}

<a class="label" href="#"><span>Какой-то текст</span></a>

Answer 1

.label {
  position: relative;
  left: 59px; top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 140px; width: 448px;
  border-radius: 33px;
  text-decoration: none;
}

.label::before,
.label::after {
  content: "";
  position: absolute;
  z-index: -1;
  box-sizing: border-box;
  border: 4px solid #e7e6ec;
}

.label::before {
  top: 50%; right: 377px;
  height: 118px; width: 118px;
  border-radius: 33px;
  transform-origin: center;
  transform: translate(50%, -50%) rotate(-45deg);
  background-image: radial-gradient( circle at 1.6em 1.6em, #615e8d 0.6em, #fff 0.65em);
}

.label::after {
  top: 0; right: 0;
  height: 140px; width: 377px;
  border-left-width: 0;
  border-radius: 0 33px 33px 0;
  background-color: #fff;
}

.label>span {
  font: 24px/1.3em sans-serif;
  color: #000;
  padding-left: 80px;
}

<a class="label" href="#"><span>Какой-то текст Какой-то текст Какой-то текстКакой-то текст Какой-то текст Какой-то текст</span></a>

Answer 2

Ответ:

height:100

#txt1 {
 font-size:40px;
 font-family:sans-serif;
 fill:615E8D;
}

<svg id="svg4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   
 width="560" height="100" viewBox="0 0 560 200" preserveAspectRatio="xMinYMin meet">
  
  <path id="path1" d="M120.1 12.8c33.1-1.2 107 1.6 160.6 1.7 61.8.1 125-.6 185.5-1.4 24 0 31 15.9 31 27.6 0 41.1.2 56 0 84.3.2 9.7-7 24.4-31 24.5-59.6 1.4-123.2.3-184.8.5-53.8.2-104.8 2.6-161.3.7-8-.3-17.2-5.6-23.6-11.6a514.4 514.4 0 0 1-36.3-38.7c-4.2-5-6.8-12.2-6.8-18.8a32 32 0 0 1 5.5-15.8c5.1-8.7 44.8-52.4 61.2-53Z"  fill="none" stroke="#000" stroke-width="2" /> 
  
  <text id="txt1" x="150" y="90"> Какой-то текст </text>
  
  <circle id="path835" cx="88.6" cy="82.2"  fill="#615E8D"  r="12.5"/>
</svg>

height="80"

#txt1 {
 font-size:40px;
 font-family:sans-serif;
 fill:615E8D;
}

<svg id="svg4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   
 width="560" height="80" viewBox="0 0 560 200" preserveAspectRatio="xMinYMin meet">
  
  <path id="path1" d="M120.1 12.8c33.1-1.2 107 1.6 160.6 1.7 61.8.1 125-.6 185.5-1.4 24 0 31 15.9 31 27.6 0 41.1.2 56 0 84.3.2 9.7-7 24.4-31 24.5-59.6 1.4-123.2.3-184.8.5-53.8.2-104.8 2.6-161.3.7-8-.3-17.2-5.6-23.6-11.6a514.4 514.4 0 0 1-36.3-38.7c-4.2-5-6.8-12.2-6.8-18.8a32 32 0 0 1 5.5-15.8c5.1-8.7 44.8-52.4 61.2-53Z"  fill="none" stroke="#000" stroke-width="2" /> 
  
  <text id="txt1" x="150" y="90"> Какой-то текст </text>
  
  <circle id="path835" cx="88.6" cy="82.2"  fill="#615E8D"  r="12.5"/>
</svg>

TL;DR

Несколько вариантов решения изменения высоты фигуры

#1. preserveAspectRatio="none"

При значении "none", указанном в шапке SVG не соблюдается соотношение сторон

Другими словами при изменении высоты, ширина фигуры останется той же.
Фиолетовая рамка показывает границы SVG: 560x200px, как указано в шапке SVG
Ниже исходная фигура с height ~= 139px при размерах SVG холста: 560x200px

#txt1 {
 font-size:40px;
 font-family:sans-serif;
 fill:615E8D;
}

<svg id="svg4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"    width="560" height="200" viewBox="0 0 560 200" style="border:1px solid purple">
  
  <path id="path1" d="M120.1 12.8c33.1-1.2 107 1.6 160.6 1.7 61.8.1 125-.6 185.5-1.4 24 0 31 15.9 31 27.6 0 41.1.2 56 0 84.3.2 9.7-7 24.4-31 24.5-59.6 1.4-123.2.3-184.8.5-53.8.2-104.8 2.6-161.3.7-8-.3-17.2-5.6-23.6-11.6a514.4 514.4 0 0 1-36.3-38.7c-4.2-5-6.8-12.2-6.8-18.8a32 32 0 0 1 5.5-15.8c5.1-8.7 44.8-52.4 61.2-53Z"  fill="none" stroke="#000" stroke-width="2" /> 
  
  <text id="txt1" x="150" y="90"> Какой-то текст </text>
  
  <circle id="path835" cx="88.6" cy="82.2"  fill="#615E8D"  r="12.5"/>
</svg>
<script>

console.log(path1.getBBox())
</script>

getBBox() показывает физические размеры фигуры, то есть, как она нарисована в редакторе (path)

размеры фигуры: width x height или 443 x 139px

#1.2 Уменьшаем высоту фигуры при рендеринге до height = 100px

width="560" height="100" viewBox="0 0 560 200" preserveAspectRatio="none"

#txt1 {
 font-size:40px;
 font-family:sans-serif;
 fill:615E8D;
}


</script>

<svg id="svg4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"    width="560" height="100" viewBox="0 0 560 200" preserveAspectRatio="none" style="border:1px solid purple">
  
  <path id="path1" d="M120.1 12.8c33.1-1.2 107 1.6 160.6 1.7 61.8.1 125-.6 185.5-1.4 24 0 31 15.9 31 27.6 0 41.1.2 56 0 84.3.2 9.7-7 24.4-31 24.5-59.6 1.4-123.2.3-184.8.5-53.8.2-104.8 2.6-161.3.7-8-.3-17.2-5.6-23.6-11.6a514.4 514.4 0 0 1-36.3-38.7c-4.2-5-6.8-12.2-6.8-18.8a32 32 0 0 1 5.5-15.8c5.1-8.7 44.8-52.4 61.2-53Z"  fill="none" stroke="#000" stroke-width="2" /> 
  
  <text id="txt1" x="150" y="90"> Какой-то текст </text>
  
  <circle id="path835" cx="88.6" cy="82.2"  fill="#615E8D"  r="12.5"/>
</svg>
<script>

console.log(path1.getBBox())
</script>

Обратите внимание, что физические размеры фигуры остались те же, высота при рендеринге стала меньше, но ширина осталась такой же. То есть произошло нарушение пропорций.

Виной этому - preserveAspectRatio="none"

Утилита, которая показывает, как динамически изменяются при рендеринге размеры фигуры при изменении `width` и `height` SVG

Поиграйте, изменяя сначала только высоту

function changeHeight() {
  itrX.addEventListener("input",()=>{svg.setAttribute("height",itrX.value)});
    var x = document.getElementById("itrX").value;
    document.getElementById("infoX").innerHTML = "SVG height: " + x +"px";
}
  function changeWidth() {
  itrY.addEventListener("input",()=>{svg.setAttribute("width",itrY.value)});
    var x = document.getElementById("itrY").value;
    document.getElementById("infoY").innerHTML = "SVG width: " + x +"px";
}
console.log(path1.getBBox())

text {
font-size:20px;
fill:black;
}
#txt1 {
 font-size:40px;
 font-family:sans-serif;
 fill:615E8D;
}
p {
display:inline-block;
font-weight:bold;
margin: 1em ;
}

<p id="infoX" ></p>
<p id="infoY" ></p>
<div>
 <span><input id="itrX" type="range" min="10" max="1000" value="1000" oninput="changeHeight()"/></span>
  <span><input id="itrY" type="range" min="10" max="1000" value="1000" oninput="changeWidth()"/></span>
</div>

 
 <svg id="svg" width="1000" height="1000" viewBox="-20 -20 1050 1050" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="border:2px solid purple">
   <defs> 
    
      <pattern id="p10" width="10" height="10" patternUnits="userSpaceOnUse">
        <path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="0.5"/>
      </pattern>
      <pattern id="p100" width="100" height="100" patternUnits="userSpaceOnUse">
        <rect width="100" height="100" fill="url(#p10)"/>
        <path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-width="1"/>
      </pattern>
    </defs>
    <rect width="1000" height="1000" fill="url(#p100)" />
    
      <circle cx="500" cy="500" r="5" fill="black" />
      
     <!-- Вертикальный блок цифр -->

      <text x="-15" y="0">0,0</text> 
       <text x="-20" y="100" >100</text> 
        <text x="-20" y="200">200</text> 
         <text x="-20" y="300">300</text> 
          <text x="-20" y="400">400</text> 
           <text x="-20" y="500">500</text> 
          <text x="-20" y="600">600</text> 
         <text x="-20" y="700">700</text> 
        <text x="-20" y="800">800</text>
       <text x="-20" y="900">900</text> 
      <text x="-20" y="1000">1000</text> 
          <!-- Горизонтальный блок --> 
     <text x="100" y="-5" >100</text> 
       <text x="200" y="-5" >200</text> 
        <text x="300" y="-5">300</text> 
         <text x="400" y="-5">400</text> 
          <text x="500" y="-5">500</text>    
         <text x="600" y="-5">600</text> 
         <text x="700" y="-5">700</text> 
        <text x="800" y="-5">800</text>
       <text x="900" y="-5">900</text>  
      <text x="990" y="-5">1000</text>   
      <!-- Ракета      -->
      <g transform="scale(1)" >
       <path id="path1" d="M120.1 12.8c33.1-1.2 107 1.6 160.6 1.7 61.8.1 125-.6 185.5-1.4 24 0 31 15.9 31 27.6 0 41.1.2 56 0 84.3.2 9.7-7 24.4-31 24.5-59.6 1.4-123.2.3-184.8.5-53.8.2-104.8 2.6-161.3.7-8-.3-17.2-5.6-23.6-11.6a514.4 514.4 0 0 1-36.3-38.7c-4.2-5-6.8-12.2-6.8-18.8a32 32 0 0 1 5.5-15.8c5.1-8.7 44.8-52.4 61.2-53Z"  fill="none" stroke="#000" stroke-width="2" />
  <circle id="path835" cx="88.6" cy="82.2"  fill="#615E8D"    r="12.5"/>
  <text id="txt1" x="150" y="90"> Какой-то текст </text>
   </g>
  </svg>

Вывод

Использование preserveAspectRatio="none" искажает пропорции фигуры и может быть использовано, только где это не критично, не заметно, например при background (фоновые рисунки, волны и т.д)

#2. preserveAspectRatio="xMinYMin meet"

Эта запись означает, что при изменении высоты, ширина будет изменена автоматически в заданной пропорции, которая определяется соотношение width / height

Также будет обеспечено, что изображение будет прижато к левому, верхнему углу.
По умолчанию preserveAspectRatio="xMidYMid meet" - изображение по центру.

Ниже утилита, которая работает с сохранением пропорций

  function changeHeight() {
  itrX.addEventListener("input",()=>{svg.setAttribute("height",itrX.value)});
    var x = document.getElementById("itrX").value;
    document.getElementById("infoX").innerHTML = "SVG height: " + x +"px";
}
  function changeWidth() {
  itrY.addEventListener("input",()=>{svg.setAttribute("width",itrY.value)});
    var x = document.getElementById("itrY").value;
    document.getElementById("infoY").innerHTML = "SVG width: " + x +"px";
}
console.log(path1.getBBox())

text {
font-size:20px;
fill:black;
}
#txt1 {
 font-size:40px;
 font-family:sans-serif;
 fill:615E8D;
}
p {
display:inline-block;
font-weight:bold;
margin: 1em ;
}

<p id="infoX" ></p>
<p id="infoY" ></p>
<div>
 <span><input id="itrX" type="range" min="10" max="1000" value="1000" oninput="changeHeight()"/></span>
  <span><input id="itrY" type="range" min="10" max="1000" value="1000" oninput="changeWidth()"/></span>
</div>

 
 <svg id="svg" width="1000" height="1000" viewBox="-20 -20 1050 1050" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" style="border:2px solid purple;">
   <defs> 
    
      <pattern id="p10" width="10" height="10" patternUnits="userSpaceOnUse">
        <path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="0.5"/>
      </pattern>
      <pattern id="p100" width="100" height="100" patternUnits="userSpaceOnUse">
        <rect width="100" height="100" fill="url(#p10)"/>
        <path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-width="1"/>
      </pattern>
    </defs>
    <rect width="1000" height="1000" fill="url(#p100)" />
    
      <circle cx="500" cy="500" r="5" fill="black" />
      
     <!-- Вертикальный блок цифр -->

      <text x="-15" y="0">0,0</text> 
       <text x="-20" y="100" >100</text> 
        <text x="-20" y="200">200</text> 
         <text x="-20" y="300">300</text> 
          <text x="-20" y="400">400</text> 
           <text x="-20" y="500">500</text> 
          <text x="-20" y="600">600</text> 
         <text x="-20" y="700">700</text> 
        <text x="-20" y="800">800</text>
       <text x="-20" y="900">900</text> 
      <text x="-20" y="1000">1000</text> 
          <!-- Горизонтальный блок --> 
     <text x="100" y="-5" >100</text> 
       <text x="200" y="-5" >200</text> 
        <text x="300" y="-5">300</text> 
         <text x="400" y="-5">400</text> 
          <text x="500" y="-5">500</text>    
         <text x="600" y="-5">600</text> 
         <text x="700" y="-5">700</text> 
        <text x="800" y="-5">800</text>
       <text x="900" y="-5">900</text>  
      <text x="990" y="-5">1000</text>   
      <!-- Ракета      -->
      <g transform="scale(1)" vector-effect="non-scaling-stroke" >
       <path id="path1" d="M120.1 12.8c33.1-1.2 107 1.6 160.6 1.7 61.8.1 125-.6 185.5-1.4 24 0 31 15.9 31 27.6 0 41.1.2 56 0 84.3.2 9.7-7 24.4-31 24.5-59.6 1.4-123.2.3-184.8.5-53.8.2-104.8 2.6-161.3.7-8-.3-17.2-5.6-23.6-11.6a514.4 514.4 0 0 1-36.3-38.7c-4.2-5-6.8-12.2-6.8-18.8a32 32 0 0 1 5.5-15.8c5.1-8.7 44.8-52.4 61.2-53Z"  fill="none" stroke="#000" stroke-width="2" />
  <circle id="path835" cx="88.6" cy="82.2"  fill="#615E8D"    r="12.5"/>
  <text id="txt1" x="150" y="90"> Какой-то текст </text>
   </g>
  </svg>

Исходный пример с height="100"

#txt1 {
 font-size:40px;
 font-family:sans-serif;
 fill:615E8D;
}

<svg id="svg4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   
 width="560" height="100" viewBox="0 0 560 200" preserveAspectRatio="xMinYMin meet" style="border:1px solid">
  
  <path id="path1" d="M120.1 12.8c33.1-1.2 107 1.6 160.6 1.7 61.8.1 125-.6 185.5-1.4 24 0 31 15.9 31 27.6 0 41.1.2 56 0 84.3.2 9.7-7 24.4-31 24.5-59.6 1.4-123.2.3-184.8.5-53.8.2-104.8 2.6-161.3.7-8-.3-17.2-5.6-23.6-11.6a514.4 514.4 0 0 1-36.3-38.7c-4.2-5-6.8-12.2-6.8-18.8a32 32 0 0 1 5.5-15.8c5.1-8.7 44.8-52.4 61.2-53Z"  fill="none" stroke="#000" stroke-width="2" /> 
  
  <text id="txt1" x="150" y="90"> Какой-то текст </text>
  
  <circle id="path835" cx="88.6" cy="82.2"  fill="#615E8D"  r="12.5"/>
</svg>
<script>

console.log(path1.getBBox())
</script>

БЛОГ НА HUSL

Как сделать изменяемую высоту?

Ответы (2 шт):

Ответ:

TL;DR

Утилита, которая показывает, как динамически изменяются при рендеринге размеры фигуры при изменении `width` и `height` SVG

Вывод

БЛОГ НА HUSL

Как сделать изменяемую высоту?

Ответы (2 шт):

Ответ:

TL;DR

Утилита, которая показывает, как динамически изменяются при рендеринге размеры фигуры при изменении width и height SVG

Вывод

Утилита, которая показывает, как динамически изменяются при рендеринге размеры фигуры при изменении `width` и `height` SVG