Отзывчивое SVG-изображение ширины с прямоугольником фиксированной высоты внизу — см. мою ручку

Мне нужно изображение SVG, похожее на изображение ниже (архитектурный символ открытой двери), размер которого будет пропорционально изменен, но высота зеленого цвета и ширина красного цвета останутся прежними. Цвета и размеры приведены только для иллюстративных целей.

Я попытался использовать этот код ниже, но не знаю, как сделать, чтобы высота в зеленом цвете и ширина в красном были фиксированными при изменении размера изображения.

Если вы можете помочь большое спасибо за ваше время!

<svg id = "imgsvg" width = "400px" height = "400px" version = "1.0" state='normal'
xmlns = "http://www.w3.org/2000/svg"
xmlns:xlink = "http://www.w3.org/1999/xlink">


    <defs>

        <!-- The left head --> 
        <svg class = "head input-source" id = "left" 
            height = "100%"
            width = "100%" 
            viewBox = "0 0 10 200"
            preserveAspectRatio = "xMinYMax"
            >
            <rect 
            width = "100%" 
            height = "100%" 
            stroke='black' 
            stroke-width='0' 
            fill = "#000"
            />
        </svg>


     <!-- The bottom head --> 
    <svg class = "head input-source" id = "bottom" 
           height = "100%"
            width='100%' 
        viewBox = "0 0 200 20"
        preserveAspectRatio = "xMinYMax"
        >
        <rect  
            width = "100%" 
            height = "100%" 
            stroke='gray'
            stroke-width='0'
            fill = "gray"
        /> 
    </svg> 

    </defs>  


 <!-- The Quad -->
       <svg class='head input-source' id = "quad"
            height = "100%"
            width='100%' 
            viewBox = "0 0 200 200"
            preserveAspectRatio = "xMinYmax"
            >
  <path
     d = "M0,1 Q199,0 199,199"
     fill = "#ffffff"
     fill-opacity = "0"
     stroke = "#000000"
     stroke-width = "2" 
     />
</svg>
        <use xlink:href='#left'/>
        <use xlink:href='#bottom'/>

    
</svg>

Ладно, дружище, в следующий раз слишком поздно :)

— 28.11.2022 00:10

Я попытался отредактировать ответ в вашем ответе, не стесняйтесь редактировать больше, если хотите, чтобы ваш ответ действительно отвечал на заданный вами вопрос.

— 28.11.2022 01:27

html image svg path responsive

26.11.2022 03:41

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

я решил свою проблему

Мое решение ниже

<p class = "codepen" data-height = "300" data-default-tab = "html,result" data-slug-hash = "mdKLYZp" data-user = "Zoki-Poki" style = "height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href = "https://codepen.io/Zoki-Poki/pen/mdKLYZp">
  Untitled</a> by Zoki Poki (<a href = "https://codepen.io/Zoki-Poki">@Zoki-Poki</a>)
  on <a href = "https://codepen.io">CodePen</a>.</span>
</p>
<script async src = "https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

26.11.2022 19:24

Ответ принят как подходящий

Если SVG являются встроенными, вы можете использовать те же длины и объединения в CSS, что и остальная часть HTML-страницы. Здесь у вас есть три одинаковых SVG. Единственная разница в том, что они содержатся в <div> разных размеров. Вы можете видеть, что оранжевый прямоугольник сохраняет одинаковую «ширину» во всех трех.

.small {
  width: 100px;
  height: 50px;
  margin: 1px;
}

.medium {
  width: 200px;
  height: 100px;
  margin: 1px;
}

.large {
  width: 400px;
  height: 200px;
  margin: 1px;
}

svg {
  width: 100%;
  height: 100%;
}

rect.r1 {
  width: 80%;
  height: 20px;
  y: calc(100% - 20px);
}

rect.r2 {
  width: 20px;
  height: 100%;
}

<div class = "large">
  <svg xmlns = "http://www.w3.org/2000/svg">
    <rect fill = "black" width = "100%" height = "100%"/>
    <rect class = "r1" fill = "orange"/>
    <rect class = "r2" fill = "orange"/>
  </svg>
</div>
<div class = "medium">
  <svg xmlns = "http://www.w3.org/2000/svg">
    <rect fill = "black" width = "100%" height = "100%"/>
    <rect class = "r1" fill = "orange"/>
    <rect class = "r2" fill = "orange"/>
  </svg>
</div>
<div class = "small">
  <svg xmlns = "http://www.w3.org/2000/svg">
    <rect fill = "black" width = "100%" height = "100%"/>
    <rect class = "r1" fill = "orange"/>
    <rect class = "r2" fill = "orange"/>
  </svg>
</div>

Красиво объяснил!

— 26.11.2022 20:47

26.11.2022 19:45