Поиск в Поддержке

Избегайте мошенников, выдающих себя за службу поддержки. Мы никогда не попросим вас позвонить, отправить текстовое сообщение или поделиться личной информацией. Сообщайте о подозрительной активности, используя функцию «Пожаловаться».

Подробнее

Why doesn't the stretch option work when applying a css image border using an svg?

  • 6 ответов
  • 1 имеет эту проблему
  • 1 просмотр
  • Последний ответ от hawkpk7

more options

I've added an svg image border to several inputs on a project using css and I can get it to render properly in every browser I've tried except firefox (first screenshot). I've applied the stretch effect to both the horizontal and vertical slices however it appears to be repeating in the center instead of stretching.

The documentation seems to indicate that it's supported so after an hour of searching I thought it might be a bug in the browser (I hope I'm wrong). I'm running firefox version 48.0 on windows 10 and I've ended up with the following code:

button{

   border-image-slice: 80; 
   border-image-width: 10px; 
   border-image-outset: 5px; 
   border-image-repeat: stretch stretch; 
   border-image-source: url("http://php-webdev-with-mysql-tompk7.c9users.io/WebRPG/images/border03.svg");
   border-style: solid;

}

I thought it might be interference by other css i had written so i tested it using a code generation site but the outcome was the same (second screenshot).

Thanks for your time.

I've added an svg image border to several inputs on a project using css and I can get it to render properly in every browser I've tried except firefox (first screenshot). I've applied the stretch effect to both the horizontal and vertical slices however it appears to be repeating in the center instead of stretching. The documentation seems to indicate that it's supported so after an hour of searching I thought it might be a bug in the browser (I hope I'm wrong). I'm running firefox version 48.0 on windows 10 and I've ended up with the following code: button{ border-image-slice: 80; border-image-width: 10px; border-image-outset: 5px; border-image-repeat: stretch stretch; border-image-source: url("http://php-webdev-with-mysql-tompk7.c9users.io/WebRPG/images/border03.svg"); border-style: solid; } I thought it might be interference by other css i had written so i tested it using a code generation site but the outcome was the same (second screenshot). Thanks for your time.
Приложенные скриншоты

Все ответы (6)

more options

It looks fine with FF48 on my Win 7.

more options

I've temporarily patched it by adding a png converted from the svg and a Firefox only css rule that changes the image, but its looking like id have to do that for every svg i use.

Thanks though.

I still would like to get the svg working lol.

more options

Could you provide a testcase on https://jsfiddle.net/ or http://codepen.io/

more options
more options

It's fixed in 49+ by bug 619500.

more options

ah ok, Thanks for looking into it.