Fill Svg Element with With a Background-Image with an Offset

Fill SVG element with with a background-image with an offset

You can use patternTransform on the pattern element to transform the pattern; it works just like the transform attribute you may already be familiar with. See the documentation for details.

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

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.

Fill SVG path element with a background image without tiling or scaling

Just make the x, y, width and height of the pattern match the bounding box of your path. You can just use "0","0","1" & "1" respectively here because the patternUnits defaults to objectBoundingBox, so the units are expressed relative to the bounding box. Then make the image in your pattern have the width and height of the path bounding box also. This time, you'll need to use "real" sizes though.

The image will be centred in the pattern automatically because the default value of preserveAspectRatio for <image> does exactly what you want.

<svg width="600" height="600">

  

  <defs>

      <pattern id="imgpattern" x="0" y="0" width="1" height="1">

        <image width="120" height="250"

               xlink:href="http://lorempixel.com/animals/120/250/"/>

      </pattern>

  </defs>

  

  

  

  <path fill="url(#imgpattern)" stroke="black" stroke-width="4"

        d="M 100,50 L 120,110 150,90 170,220 70,300 50,250 50,200 70,100 50,70 Z" />

</svg>

Offset an SVG fill pattern

Don't offset the rectangle, offset the pattern. You can specify the origin (offset) of a pattern using the x and y attributes. It doesn't matter if the offset is positive or negative, the pattern will still fill the element completely.

html, body, svg {

    margin: 0;

    width: 100%;

    height: 100%;

}

svg {

    border: solid 1px black;

}

<!-- Pattern with no offset -->

<svg class="gFlow" id="main" xmlns="http://www.w3.org/2000/svg">

    <defs>

        <pattern height="64" id="grid" patternUnits="userSpaceOnUse" width="64">

            <circle cx="32" cy="32" fill="orange" r="5"></circle>

        </pattern>

    </defs>

    <rect fill="url(#grid)" height="100%" width="100%"></rect>

</svg>

<!-- Pattern moved right by half the pattern width (32) -->

<svg class="gFlow" id="main" xmlns="http://www.w3.org/2000/svg">

    <defs>

        <pattern height="64" id="grid" patternUnits="userSpaceOnUse" width="64"

                 x="32" y="0">

            <circle cx="32" cy="32" fill="orange" r="5"></circle>

        </pattern>

    </defs>

    <rect fill="url(#grid)" height="100%" width="100%"></rect>

</svg>

Equivalent of background-size: fill for SVG image element

To keep the height of the image unchanged, set the fixed value of the viewport height and preserveAspectRatio = "none"

<svg width="100%" height="300" viewBox="0 0 500 300" preserveAspectRatio = "none">

  <image width="500" height="300" xlink:href="//unsplash.it/500/300"/>

</svg>

svg background image position is always centered in internet explorer, despite background-position: left center;

The problem is not with your CSS but with your SVG. The SVG will grow to fill the entire element box’s background (as expected). How your SVG scale then becomes the controlling factor:

Set a viewBox="0 0 width height" (in pixels) attribute on your <svg> element and remove its width and height attributes. You also need to set preserveAspectRatio="xMinYMid" (x/vertically left-aligned, y/horizontally middle-aligned) on the svg element. This works with Internet Explorer 10 and 11, at least.

<svg viewbox="0 0 64 64"
    preserveAspectRatio="xMinYMid">
    … </svg>

Learn more about the preserveAspectRatio and viewBox attributes. Source, “Getting started with SVG” in the IEblog.

---

Related Topics