Using Raphael JS, fill an SVG element with with a background-image with an offset

后端 未结 2 1596
说谎
说谎 2021-02-03 13:10

I want to this this Fill SVG element with with a background-image with an offset, but using Raphael JS.

Displaying an rectangle with a background image without

2条回答
  •  佛祖请我去吃肉
    2021-02-03 13:41

    I'd suggest drawing the image separately from the rect. If you need the stroke you can either draw a filled rect behind the image or draw the rect on top with stroke and no fill.

    The image is drawn with clipping to clip out the part you want, and you can control the offset of the image either with img.translate(x,y) or by the paper.image params:

    var img = paper.image("foo.png", 10, 10, 80, 80);
    img.attr({ "clip-rect": "20,20,30,30" });
    

    This above works only for rectangular clipping (svg itself supports arbitrary clipping via the 'clip-path' property). If you want a pattern fill, then you currently have to step outside of what raphaël provides. Easiest is probably to just extend raphaël to do that, and to provide some other fallback to the browser(s) that doesn't support svg.

    SVG Web seems to have at least partial support for svg patterns if you're looking for something to work as a fallback for old browsers.

提交回复
热议问题