Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

Learn More

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

  • 6 답장
  • 1 이 문제를 만남
  • 11 보기
  • 최종 답변자: 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.

첨부된 스크린샷

모든 댓글 (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.