I'm using inline svgs. I have a svg circle and fill it with a pattern. The image inside needs to 100% of container size. This works until the parent element gets resized.
When the parent element(div) gets resized via js the pattern wont reflect 100% width and height anymore.
This works in Firefox though.
To me it seems like the css doesnt get updated. If I change the value to 99% manually Chrome updates the size on both dimensions.
This is the structure of my svg:
<div style="height:150px; width:150px;">
<svg style="height:100%; width:100%;">
<defs>
<pattern id="image" x="0%" y="0%" width="100%" height="100%">
<image x="0%" y="0%" width="58%" height="58%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="image.jpg"></image>
</pattern>
</defs>
<circle cx="50%" cy="50%" r="29%" fill="url(#image)">
</circle>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#other"></use>
</svg>
<div>
I had found similar questions, but without help:
Image inside svg pattern is blurried after zoom in Chrome (there the image gets blurry)
SVG <pattern> won't load when generated by Javascript (the question got closed without a good answer)
You need to add viewBox property in svg, please refer the following link:
https://css-tricks.com/scale-svg/
Updated Code -
function inc(){
var parent = document.getElementById('parent');
parent.style.width = '350px';
parent.style.height = '350px';
}
<div id='parent' style="height:150px; width:150px;">
<svg style="height:100%; width:100%;" viewBox="0 0 50 50">
<defs>
<pattern id="image" x="0%" y="0%" width="100%" height="100%">
<image x="0%" y="0%" width="58%" height="58%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="image.jpg"></image>
</pattern>
</defs>
<circle cx="50%" cy="50%" r="29%" fill="url(#image)">
</circle>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#other"></use>
</svg>
<div>
Increase
Related
I have a circular, image mask set up in HTML to cover an image.
Here is that code for reference:
<div id="group-focus">
<svg height="800" viewbox="0 0 1000 800">
<defs>
<mask id="text-mask" maskUnits="userSpaceOnUse"
maskContentUnits="userSpaceOnUse">
<circle cx="600" cy="400" r="400" fill="white">
</mask>
</defs>
<!-- this is the image that I masked -->
<g mask="url(#text-mask)">
<image id="text-focus" width="2560" height="1440"
y="0" x="0" xlink:href="img/Asset13x.png" />
</g>
</svg>
</div>
Because I have the mask size set in HTML to the size I want, I am unsure of how to go about expanding the mask to a different size. Can you animate a mask in Javascript? This is for a motion graphic project I am working on currently.
Thanks!
This below code works fine in chrome and filter is applied but fails in firefox. An extra space is also added by direct inclusion of svg definition in the html(This is present in all browsers). Not sure why its happening like this. Can someone let me know the issue, I am new to svg
Here is the codepen link: http://codepen.io/susheel61/pen/wJYgwr
<svg version="1.1" id="ThemeSvg">
<defs>
<g>
<!--/* Polygon definitions for overlay shape */-->
<rect id="red-poly" x="0%" y="0%" width="53%" height="100%" fill="#b5121b" transform="skewX(-10)"></rect>
<rect id="rect-fade-out" x="0%" y="0%" width="53%" height="100%" fill="url(#fade-out)" transform="skewX(-10)"></rect>
</g>
<g>
<filter id="red-angled-overlay" x="0%" y="0%" width="100%" height="100%">
<!--/* Bring in the mask for fading the image out */-->
<feImage xlink:href="#rect-fade-out" result="red-overlay" x="0" y="0"></feImage>
<!--/* Create composite of image and fade mask */-->
<feComposite in="SourceGraphic" in2="red-overlay" operator="out" result="composite"></feComposite>
<!--/* Bring in the colored polygon for the overlay */-->
<feImage xlink:href="#red-poly" result="overlay" x="0" y="0"></feImage>
<!--/* Blend the overlay with the faded image */-->
<feBlend in="composite" in2="overlay" mode="multiply"></feBlend>
</filter>
</g>
</defs>
</svg>
<svg version="1.1" viewBox="0 0 840 474" preserveAspectRatio="xMaxYMin slice">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://wowslider.com/sliders/demo-10/data/images/autumn_leaves.jpg" width="100%" height="100%" filter="url(#red-angled-overlay)" class="svg-black-overlay"></image>
</svg>
Firefox does not support feImage filters where the image is a fragment. It only supports feImage where the image is a complete standalone image or a data URI of a complete SVG document.
You'd have to create two additional standalone SVG images one with each polygon definition in and point the feImage elements at the complete image document in each case.
I have a set of SVG paths which make up a logo.
Then, I want to have several images (to appear as the SVG) which slide through gradually. My problem is that I cannot make them work as the background, in other words, I want the SVG to mask the image(s).
I have a SVG like this:
<svg class="polygon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="225.533px" height="261.262px" viewBox="0 0 225.533 261.262" style="enable-background:new 0 0 225.533 261.262;" xml:space="preserve">
<g id="svg-draw">
<path data-name="nav-projects" data-href="<?php print JUri::base() ?>projects" data-ajax="true" class=" st4 hover-logo" d="M26.05,147.366c-4.384,10.375-21.823,47.717-24.713,71.831c-2.804,23.373,2.034,40.255,27.625,37.926c6.952-0.97,15.662-4.346,24.417-9.214"></path>
</g>
<image clip-path="url(#svg-draw)" height="100%" width="100%" xlink:href="<?php print THEME_URL."/img/rev1.jpg"; ?>" />
</svg>
And if you notice, I have put the image tag right inside the SVG. But nothing happens. I also have removed most of the Paths of the svg in the above example, because they are too long to be copied here.
I used the clip-path property of the image, but to no avail.
You can't just clip with any element. You have to define a <clipPath> and clip with that.
<svg class="polygon" version="1.1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="225.533px" height="261.262px"
viewBox="0 0 225.533 261.262">
<defs>
<clipPath id="svg-draw">
<path d="M26.05,147.366c-4.384,10.375-21.823,47.717-24.713,71.831
c-2.804,23.373,2.034,40.255,27.625,37.926
c6.952-0.97,15.662-4.346,24.417-9.214"></path>
</clipPath>
</defs>
<image clip-path="url(#svg-draw)" height="100%" width="100%"
xlink:href="http://placekitten.com/200/300" />
</svg>
Depending on the effect you wish to achieve, this CSS Tricks article should provide you with the right guidance https://css-tricks.com/clipping-masking-css/
The below selector will not find <clipPath> elements inside <defs> on Chrome (38):
d3.selectAll('defs clipPath')
(This is D3.js code but I suspect underlying querySelectorAll issue)
It works fine on Firefox. Is there a different selector syntax to use that will work on both browsers?
In the example below on Firefox you will see the whole text because the clip path is removed. But on Chrome it will be cut off after 85 pixels because the clip path is not removed.
d3.selectAll('defs clipPath').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg height="200" width="400">
<defs>
<clipPath id="clip1">
<rect id='tt' x="0" y="0" width="85" height="15"></rect>
</clipPath>
</defs>
<text clip-path="url(#clip1)" x="0" y="15">This text should all be visible once we remove the clip-path</text>
</svg>
As Lars pointed out, this was a webkit bug, and now in Blink it still exists as Issue 237435: querySelectorAll unable to find SVG camelCase elements in HTML
So until it's fixed, using a class selector is probably the best workaround.
d3.selectAll('defs .clippy').remove();
d3.selectAll('defs .clippy').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg height="200" width="400">
<defs>
<clipPath id="clip1" class='clippy'>
<rect id='tt' x="0" y="0" width="85" height="15"></rect>
</clipPath>
</defs>
<text clip-path="url(#clip1)" x="0" y="15">This text should all be visible once we remove the clip-path</text>
</svg>
As shown in this fiddle it's possible to render a CSS sprite in SVG using the foreignObject element.
However this isn't supported in IE, so I was wondering if there was another way to do it.
I suspect the answer may be no, because I found two unresolved questions on this (1,2)
I'm using d3.js so any answer that spells out the d3 way to do this would be a bonus.
You could pick out parts of an image using a clipPath if necessary. Extend your jsfiddle like this to see what I mean...
<div class='source youtube'></div>
<svg width="100%" height="100%">
<foreignObject height=50 width=50>
<div class='source facebook'></div>
</foreignObject>
<defs>
<clipPath id="c">
<rect y="10" width="7" height="10"/>
</clipPath>
<clipPath id="c2">
<rect x="7" y="12" width="7" height="10"/>
</clipPath>
</defs>
<image transform="scale(4.5)" y="-5" width="40" height="20" xlink:href="https://s3.amazonaws.com/856/sprite.png" clip-path="url(#c)"/>
<g transform="translate(-30, 0)">
<image transform="scale(4.5)" x="0" y="0" width="40" height="20" xlink:href="https://s3.amazonaws.com/856/sprite.png" clip-path="url(#c2)"/>
</g>
<svg>