Блог

Главная - Вопросы по программированию - Сохранение спектра изображения шаблона в SVG, как css background-обложка изображения

Сохранение спектра изображения шаблона в SVG, как css background-обложка изображения

#javascript #html #css #image #svg

#javascript #HTML #css #изображение #svg

Вопрос:

У меня есть SVG, представляющий собой два треугольника, расположенных по диагонали, чтобы создать прямоугольник. Этот прямоугольник составляет 100% ширины и высоты окна браузера. Я пытаюсь заполнить каждое из них одним фоновым изображением. Чтобы сделать это, я поместил изображение в шаблон и дал каждому треугольнику заливку этим шаблоном. Однако изображение в шаблоне не сохраняет свое соотношение при изменении размера окна. Изображение растягивается и искажается. Я хочу, чтобы изображение действовало аналогично тому, как будет работать этот css:

 background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Это код, который у меня есть до сих пор для svg:

 <svg viewBox="0 0 25 25" preserveAspectRatio="none" width="100%" height="100%">
    <defs>
        <pattern id="pattern3" height="100%" width="100%"
         patternContentUnits="objectBoundingBox" viewBox="0 0 1 1"
         preserveAspectRatio="xMidYMid slice">
            <image height="1" width="1"  preserveAspectRatio="xMidYMid slice" 
              xlink:href="img/1.JPG" />
        </pattern>
    </defs>
    <polyline points="0,0  25,0  0,25"
        fill="url(#pattern3)" id="top"/>
    <polyline points="25,0  25,25  0,25"
        fill="url(#pattern3)"  id="bottom"/>
</svg>

Пожалуйста, помогите мне!

Ответ №1:

Вы можете исправить это, изменив preserveAspectRatio атрибут в вашем корневом SVG на что-то другое. Например:

 <svg viewBox="0 0 25 25" preserveAspectRatio="xMidYMid slice"
     width="100%" height="100%">

Демонстрация здесь

Комментарии:

1. Есть ли способ выполнить это без изменения соотношения сторон корневого SVG? Я не хочу, чтобы треугольники были нарезаны сверху и снизу, я хочу, чтобы они полностью занимали экран.

2. Наличие preserveAspectRatio="none" в корневом элементе svg всегда приведет к растягиванию или сжатию содержимого. Внутреннее содержимое не может переопределить это. Единственным решением было бы использовать Javascript для установки размера треугольников.

3. Изображение сильно растягивается (хотя и пропорционально) при изменении размера окна с помощью вашего кода. Я хочу, чтобы он действовал больше как background-cover, который намного более интуитивно понятен и не растягивает фоновое изображение до смехотворно большого размера, когда окно становится больше, а скорее перемещает изображение, чтобы покрыть область. Как бы я это сделал?