Блог

Главная - Вопросы по программированию - Растянутое фоновое изображение SVG

Растянутое фоновое изображение SVG

#javascript #html #css #svg

#javascript #HTML #css — код #svg

Вопрос:

здесь я добавил фоновое изображение в SVG, но изображение растягивается, как я уже пробовал preserveAspectRatio="none" , неподвижное изображение растягивается. Мне нужно полное изображение, которое должно быть видно.

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1013.269px" height="558.944px" viewBox="453.365 271.056 1013.269 558.944" preserveAspectRatio="none" enable-background="new 453.365 271.056 1013.269 558.944"
  xml:space="preserve">
       <g>
        <defs>
            <pattern id="img1" patternContentUnits="objectBoundingBox" width="100%" height="100%">
            <image height="1" width="1" preserveAspectRatio="none" x="0" y="0"  href="https://i.ibb.co/wKNKdYH/bg.jpg" />
            </pattern>
        </defs>
        <path fill="url(#img1)" d="M521.695,539.785c-8.101,14.076-15.49,28.521-22.165,43.27c28.415,10.424,48.69,37.716,48.69,69.745
            c0,41.018-33.251,74.268-74.268,74.268c-5.151,0-10.179-0.526-15.035-1.524c-2.411,18.347-3.823,36.865-4.211,55.47h309.221
            c1.642-30.516,10.37-60.22,25.465-86.674L521.695,539.785z"/>
        </g>
        </svg>

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

1. Вы хотите что-то другое, кроме none для сохранения спектрации

2. @ Роберт Лонгсон, как я могу добиться того, чтобы изображение cover завершало путь. Я новичок в SVG. Можете ли вы указать мне правильное направление, чего мне здесь не хватает.

3. Кажется, вы на правильных строках, за исключением значения preserveAspectRatio.

4. @ Robert Longson Вы имеете в виду, что я должен удалить значение preserveAspectRatio? если я удалю, то получу тот же результат.

5. Взгляните на developer.mozilla.org/en-US/docs/Web/SVG/Attribute /…

Метки: