Положение SVG перемещается при изменении масштаба страницы - PullRequest
Новая
       25

Положение SVG перемещается при изменении масштаба страницы

0 голосов
/ 31 марта 2019

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

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

Код SVG 

<div id="midWrapper">
    <!--Middle container SVG as it is a custom shape-->
    <div id="containerMiddle">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 980 590"><title>Custom shaped rectangle with corner missin</title><path d="M766.29,13.57,967.43,214.71A46.32,46.32,0,0,1,981,247.47V544.68A46.32,46.32,0,0,1,934.68,591H46.32A46.32,46.32,0,0,1,0,544.68V46.32A46.32,46.32,0,0,1,46.32,0H733.53A46.32,46.32,0,0,1,766.29,13.57Z" style="fill:#5f1742; pointer-events: none;"/></svg>
    </div>

    <!--Top right corner of the middle container, used as a link to call pendle burton-->
    <div id="contactTriangle">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 185.99 185.99"><title>Phone Icon in a Triangle used to call the restaurant</title>
            <path d="M186,9.92V176.05a9.92,9.92,0,0,1-16.93,7L2.93,16.93A9.92,9.92,0,0,1,9.94,0H176.07A9.92,9.92,0,0,1,186,9.92Z" style="fill:#fff"/>
            <path d="M129.27,80.74a3,3,0,0,1-.14,2.54c-1.36,2.2-3,4.24-4.44,6.36-1.94,2.79-2.38,5.58-.64,8.76,3,5.56,5.82,11.26,8.71,16.9,1.8,3.49,5.12,5.07,8.43,3A132.31,132.31,0,0,0,155.11,108c2.38-1.94,2-5,1.76-7.79-.58-7.44-3.2-14.31-6.75-20.73-10.86-19.59-24.34-37.06-42.84-50.07-4.06-2.86-9.06-4.42-13.71-6.38a7,7,0,0,0-7.32,1.31,124.44,124.44,0,0,0-11,9.71C72,37.36,72.55,41,76.09,44,81,48.05,85.88,52,90.64,56.23a7.06,7.06,0,0,0,7.93,1.31c2.91-1.14,5.77-2.38,9-3.71A141.83,141.83,0,0,1,129.27,80.74Z" style="fill:#5f1742"/>
            <path d="M107.56,53.83a141.83,141.83,0,0,1,21.71,26.91,3,3,0,0,1-.14,2.54c-1.36,2.2-3,4.24-4.44,6.36-1.94,2.79-2.38,5.58-.64,8.76,3,5.56,5.82,11.26,8.71,16.9,1.8,3.49,5.12,5.07,8.43,3A132.31,132.31,0,0,0,155.11,108c2.38-1.94,2-5,1.76-7.79-.58-7.44-3.2-14.31-6.75-20.73-10.86-19.59-24.34-37.06-42.84-50.07-4.06-2.86-9.06-4.42-13.71-6.38a7,7,0,0,0-7.32,1.31,124.44,124.44,0,0,0-11,9.71C72,37.36,72.55,41,76.09,44,81,48.05,85.88,52,90.64,56.23a7.06,7.06,0,0,0,7.93,1.31C101.48,56.4,104.34,55.16,107.56,53.83Z" style="fill:#5f1742"/>
        </svg>
    </div>
</div><!--Closing tag for SVG-->

Все стили для элементов 

#containerMiddle{
width: 980px;
height: 590px;
margin-top: 60px;
pointer-events: none;
margin-left: auto;
margin-right: auto;
}

#contactTriangle{
width: 185px;
height: 185px;
pointer-events: none;
margin-left: 66%;
margin-top: -31%;
}

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

1 Ответ

0 голосов
/ 31 марта 2019

Я думаю, вам следует избегать размещения элементов с полями.

Вы всегда хотите, чтобы ваш угловой svg находился в верхнем правом углу контейнера, поэтому попробуйте использовать position:absolute, right:calc(50% - 490px) и top:0 - это будет работать для вашей текущей настройки, пока ваш родительский контейнер имеет position:relative.

Скрипка здесь: https://jsfiddle.net/15scjpvd/1/

#midWrapper {
  position:relative;
}

#containerMiddle{
  width: 980px;
  height: 590px;
  margin-top: 60px;
  pointer-events: none;
  margin-left: auto;
  margin-right: auto;
}

#contactTriangle{
  width: 185px;
  height: 185px;
  pointer-events: none;
  top:0;
  right: calc(50% - 490px);
  position:absolute;
}

Причина, по которой я использовал 50% - 490px, заключается в том, что ваш контейнер в настоящее время выровнен по центру - он на 50% представляет центр родительского контейнера, а 490px - половина его полной ширины.

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

Взгляните на эту скрипку: https://jsfiddle.net/3x6187ov/4/ Тогда ширина треугольника и прямоугольника соответственно равна 100% и 30% ширины родительского контейнера. 

#midWrapper {
  position:relative;
  width:100%;
}

#containerMiddle{
  width: 100%;
  margin-top: 60px;
  pointer-events: none;
  margin-left: auto;
  margin-right: auto;
}

#contactTriangle{
  width: 20%;
  pointer-events: none;
  top:0;
  right:0;
  position:absolute;
}

Если ваш контейнер не может расширяться более чем на width, вы также можете указать свойство max-width. Тогда вы можете использовать следующее: https://jsfiddle.net/3fva1cqn/2/

#midWrapper {
  position:relative;
  width:100%;
  max-width:960px;
}

#containerMiddle{
  width: 100%;
  margin-top: 60px;
  pointer-events: none;
  margin-left: auto;
  margin-right: auto;
}

#contactTriangle{
  width: 20%;
  pointer-events: none;
  top:0;
  right:0;
  position:absolute;
}

Кроме того, в вашем текущем сценарии вам не нужно указывать ширину и высоту ваших svgs, потому что, если вы специально не установите preserveAspectRatio в none, по умолчанию они будут придерживаться объявленного соотношения сторон с окном просмотра.

...