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
Correct Font-Display Value for Icon Fonts
Image-Less Pure-CSS Arrow Tags
Using @Import for Google Fonts Is Not Working on Internet Explorer
How to Remove Extra Space After a Colon in CSS with Sublime Text 2
Setting Listview <Li> Height in Jquery Mobile
Why Am I Unable to Apply a Border to an Angular Mat-Table Row
How to Make a Div Stretch Its Height Between Two Other Divs and Center Its Content
Animating Svg Paths with Discontinuous Parts
Broke Page Styles of Vue.Js App (Webpack Template) When Live Changing It in Chrome Devtools
Hiding Text Using "Text-Indent"
Interruption of a CSS Transition Does Not Work for Same Attribute Value
Svg Letter-Spacing Also Applied to Mozilla Firefox
How to Get Around The Ie CSS Percentage Rounding Problem