Using CSS Approach How to Set an Image to Fill a Path in Svg

Using CSS approach how to set an image to fill a path in SVG?

Here's your thing working - http://jsfiddle.net/eAfTc/

.myClass {
fill: url(#image);
stroke: red;
stroke-width: 5;
}

<svg id='pattern' xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id='image' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
<image xlink:href='http://dummyimage.com/600x400/abc/333' width="100" height="100" preserveAspectRatio="none"></image>
</pattern>
</defs>
</svg>
<svg id='triangle' xmlns="http://www.w3.org/2000/svg" version="1.1" width='300px' height='300px'>
<path d='M0 0 L300 0 L300 300 Z' class='myClass'></path>
</svg>

Note that there's a patternContentUnits and a patternUnits, they do different things. Personally I prefer to use a viewBox for defining the coordinate system.

Here's a new example showing the pattern applied to various elements of different sizes and aspect ratios, it also gets rid of the first svg fragment.

Update: I added 'preserveAspectRatio' to the <pattern> element, and a new example showing the stretching and scaling.

How to use css fill: on image elements inside svg?

The SVG <image> element does not accept fill as an attribute. So it would not accept the CSS fill equivalent.

W3C SVG <image> element: http://www.w3.org/TR/SVG11/struct.html#ImageElement

Attribute definitions for the SVG <image> element :

  • x = The x-axis coordinate of one corner of the rectangular region into which the referenced document is placed.
    If the attribute is not specified, the effect is as if a value of '0' were specified.
    Animatable: yes.
  • y = The y-axis coordinate of one corner of the rectangular region into which the referenced document is placed.
    If the attribute is not specified, the effect is as if a value of '0' were specified.
    Animatable: yes.
  • width = The width of the rectangular region into which the referenced document is placed.
    A negative value is an error (see Error processing). A value of zero disables rendering of the element.
    Animatable: yes.
  • height = The height of the rectangular region into which the referenced document is placed.
    A negative value is an error (see Error processing). A value of zero disables rendering of the element.
    Animatable: yes.
  • xlink:href = A IRI reference.
    Animatable: yes.

If it works with the SVG <use> element than use it!

fill SVG path with pattern without stretching

to solve the issue I changed preserveAspectRatio to "xMidYMid slice" instead of "none"

<svg id="shape-overlays" class="shape-overlays" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" >

How to make SVG fill act in a similar way to CSS background-size: cover

To fix this, add an appropriate preserveAspectRatio attribute to the <image> in your <pattern> to tell it that you want the image to be zoomed and sliced.

<pattern id="image" patternUnits="userSpaceOnUse" width="83.38" height="100" x="0" y="0">
<image xlink:href="http://goo.gl/kVVuy1"
x="0" y="0" width="100%" height="100%"
preserveAspectRatio="xMinYMin slice"/>
</pattern>

Demo here

Reversing the flip and rotation of an image fill in a path that is flipped and rotated

Rather than filling the arrow, <svg ... fill="url(#fillImages0sp14)", transforming it and then trying to somehow separate it from its fill, untransform that, and then refill it, I'd just display the image, but masked by the transformed arrow.

I don't understand why the orange border still shows up. I've made the black rectangle overly large (which helped), and I've changed the overflow="...", but neither made it disappear.

Edit: Your global stroke attributes were messing up the mask. Moving them to the displayed arrow (the only thing using that stroke) fixed the orange border issue.

P.S. xlink is deprecated. Just use href.

P.P.S. I had to add a final translate to center the transformed arrow over the image. It's easier and more accurate to move the center of the arrow to the center of the image first, and then do your transformations about that center.

<svg name="transformed" x="0" y="0" width="159.113" height="159.113" overflow="visible" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="Arrow" d="M0,149.96 25.02,149.96 25.02,0 75.06,0 75.06,149.96 100.08,149.96 50.04,200 Z" />
<use id="TransformedArrow" href="#Arrow" transform="translate(38.3625,-29.2893) rotate(45,50.04,100) translate(0,200) scale(1,-1)" />
<mask id="ArrowMask">
<!-- Everything under black will be invisible -->
<rect x="0" y="0" width="100%" height="100%" fill="black" />
<!-- Everything under white will be visible -->
<use href="#TransformedArrow" fill="white" />
</mask>
</defs>
<image width="159.113" height="159.113" mask="url(#ArrowMask)" href="https://i.stack.imgur.com/yDcGi.png" />
<use href="#TransformedArrow" fill="none" stroke="#4472C4" stroke-miterlimit="8" stroke-width="2.25" />
</svg>

SVG path drawing and filling with image

One way is simply to scale the image using patternTransform. I've also adjusted the height to ensure it is placed correctly.

var width = 800;var height = 200; 
var svg = d3.select(".mydiv").append("svg") .attr("width",width) .attr("height",height) .attr("viewBox", "0 0 250 100");
var defs= svg.append('defs')defs.append('pattern') .attr('id', 'pic1') .attr('patternUnits', 'userSpaceOnUse') .attr('width', 115.5) .attr('height', 100) .append('svg:image') .attr('xlink:href', 'http://francomasoma.com/wp-content/uploads/2016/05/FullSizeRender_7-560x483.jpg') .attr("width", 115.5) .attr("height", 100) .attr("x", 0) .attr("y", 0);

defs.append('pattern') .attr('id', 'pic2') .attr('patternUnits', 'userSpaceOnUse') .attr('width', 115.5) .attr('height', 100) .append('svg:image') .attr('xlink:href', 'http://wire.kapitall.com/wp-content/image-import/92277513-560x483.jpg') .attr("width", 115.5) .attr("height", 100) .attr("x", 0) .attr("y", 0);

defs.append('pattern') .attr('id', 'pic3') .attr('patternUnits', 'userSpaceOnUse') .attr('width', 115.5) .attr('height', 75) .attr('patternTransform', "scale(2)") .append('svg:image') .attr('xlink:href', 'http://gallery.ksotov.co.uk/main.php?g2_view=core.DownloadItem&g2_itemId=13225&g2_serialNumber=1') .attr("width", 115.5) .attr("height", 100) .attr("x", 0) .attr("y", 0);

svg.append("a") .attr("xlink:href", "http://www.google.com") .append('path') .attr("d", "M 0,0, 57.7,-100, 115.5,0z") .attr("transform", "translate(135.5, 100)") .attr("fill", "url(#pic1)");
svg.append("a") .attr("xlink:href", "http://www.wikipedia.com") .append('path') .attr("d", "M 57.7,0, 0,-100, 115.5,-100z") .attr("transform", "translate(67.7, 100)") .attr("fill", "url(#pic2)");
svg.append("a") .attr("xlink:href", "#testanchor") .append('path') .attr("d", "M 0,0, 57.7,-100, 183,-100, 125.5,0") .attr("transform", "translate(0, 100)") .attr("fill", "url(#pic3)");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script><div class="mydiv">    </div>


Related Topics



Leave a reply



Submit