I'm using an SVG with a mask to create a mask effect (it needs to be working from IE11+). I have a sequence in a PNG that I use a a mask and animate the X attribute. It works fine in all browsers and the animating works in IE but the scaling of the mask it off, the proportions change. It's like it's 1/3rd of it's original width, even though the width is set.
How it should look:
https://i.imgur.com/kF4YcMf.jpg
How it looks:
https://i.imgur.com/O0XUqb0.png
My SVG code
<svg width="640" height="360" baseProfile="full" version="1.2">
<defs>
<mask id="svgMask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" transform="scale(1)">
<image id="maskImage" width="35840" height="360" xlink:href="assets/img/mask-high.png" y="0" x="-6400"/>
</mask>
</defs>
<image id="titleImage" width="640" height="360" xlink:href="assets/img/doggy.jpg" mask="url(#svgMask)" y="0" x="0"/>
</svg>
Related
I've almost finished my background but it's not working properly, I'm trying to get the image to fit the viewbox dimensions. I need my image to responsive and to act like background-size:cover. I also need to have the scrollbars gone and I don't know why its there. Can someone help me get my image to fit the entire viewbox area and be responsive - I need it to be 100% width and 100% height and the image covered
codepen
<svg viewBox="0 0 490 500" width="100%" height="100%">
<defs>
<pattern id="hexagons" width="100%" height="100%">
<g id="svg" fill="black" x="0" y="0"></g>
</pattern>
<mask id="hexagon-halftone-mask">
<rect x="0" y="0" width="100%" height="100%" fill="url(#hexagons)" />
</mask>
</defs>
<image id="svg-bg" xlink:href="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426_960_720.jpg" mask="url(#hexagon-halftone-mask)"/>
</svg>
I am trying to render an image inside a circle with svg. This works on chrome, but not other browsers, what am I doing wrong?
I have included several possible ways of specifying the link to the image, href= is what works with chrome. I can't get any of these to work elsewhere. If I change the fill to #000 it fills with black - so the problem is in the pattern.
<svg width="488.20001220703125" height="469.183349609375" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="circleimage" x="135.99766906738282" y="126.2336688232422" patternUnits="userSpaceOnUse" height="206.440673828125"
width="206.440673828125">
<image x="0" y="0" href="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"
xmlns:xlink="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"
xlink="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"></image>
</pattern>
</defs>
<circle cx="239.21800598144532" cy="229.4540057373047" r="103.2203369140625" fill="url(#circleimage)"></circle>
</svg>
You need to specify the height and width of your image.
I'm trying to get a video mask of some text, overlayed on top of another instance of video. I've achieved the desired effect in FF:
The Text overlay masking the an instance of the same video it is overlayed on top of. I used the following code to do this:
<video id="bkg" src="/locations.mp4" autoplay loop></video>
<svg class="svg" xmlns="http://www.w3.org/2000/svg">
<clippath id="cp-circle">
<text
text-anchor="middle"
x="50%"
y="98%"
>TEXT TEXT</text>
</clippath>
<g clip-path="url(#cp-circle)">
<foreignObject width="853" x="0"
y="0" height="480">
<body xmlns="http://www.w3.org/1999/xhtml">
<video id="bkg2" src="/locations.mp4" autoplay loop></video>
</body>
</foreignObject>
</g>
</svg>
<script>
document.getElementById("bkg").playbackRate = 0.8;
</script>
In Chrome this simply renders the two videos on top of each other, with no masking. Any idea why or if there is a workaround?
Chrome does not support SVG foreignObject correctly. WebKit bug (Filed). See http://svgdesign.guru for example.
I'm using SVG elements with masks to "knock out" or "punch out" text so that the underlying image can be shown through. The only problem with my current set up is that when the browser window is resized, the image elements stretch and distort, rather than staying at a fixed aspect ratio/size.
I've been pouring over the svg spec and have read about preserveAspectRatio but nothing seems to work.
Here's the basic element I'm using:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="masktext1">
<rect width="100%" height="100%" fill="#fff" />
<text width="100%" class="svgtext">TEXT 1</text>
</mask>
</defs>
<image xlink:href="https://s3.amazonaws.com/f.cl.ly/items/1w3F3d130t2q1i2n2b2Y/pattern.png" mask="url(#masktext1)" width="100%" height="100%" x="0" y="0" preserveAspectRatio="xMinYMin slice" />
</svg>
Here's a JS Fiddle example. Note that the issue is visible when you resize the window horizontally.
http://jsfiddle.net/785yjwws/
The solution was found by reading up on viewBox as suggested by chipChocolate.py. I found this great article by on sarasoueidan.com which helped immensely. The end solution involved setting the width and height of the image element to be the full size of the background image, setting the width and height of the parent svg element programmatically for the space, and then setting viewBox = "0 0 [programmatic width] [programmatic height]" which frames the content.
My goal is to cut out a rectangular area of a photo using an svg mask in html5. I have attempted to implement this using the code below and in this fiddle, to no avail. Can anyone tell me what I'm doing wrong?
html:
<body>
<svg id="svg-rect" width="50px" height="50px">
<defs>
<mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect width="100%" height="100%" />
</mask>
</defs>
</svg>
<!--<svg id="svg-rect" width="50px" height="50px">
<rect width="100%" height="100%" />
</svg>-->
<img src="https://scontent-a.xx.fbcdn.net/hphotos-prn1/t1.0-9/p235x165/75938_10152243783285987_398136218_n.jpg"/>
</body>
css:
img {
mask: url(#masking);
position:absolute;
top:0px;
left:0px;
}
#svg-rect{
position:absolute;
top:50px;
left:60px;
z-index:2;
}
Applying SVG effects to HTML only works in Firefox. You have to use -webkit-mask in Chrome/Safari and that's been deprecated. Next, you have to fill your rectangle with a color for the mask to take effect. And there is a bug in firefox, where you have to specify the x/y offset for a rect in a mask in decimal form, %'s won't work. Change your rect definition to:
<rect x=".2" y=".2" width=".25" height=".25" fill="white" />
And you'll see a mask effect (in Firefox only)
or... to invert the mask, use an empty fill and a solid stroke
<rect x="0" y="0" width="1" height="1" stroke="white" stroke-width=".4" />
The best way to do this for maximum compatibility, however, is to use inline SVG all the way, and just do your image content in SVG using the SVG image tag.
Elaborating on Michaels' last point, here's how you would do it in a pure SVG way.
<svg width="235" height="314" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="masking">
<rect width="100%" height="100%" fill="white" />
<rect x="60px" y="50px" width="50px" height="50px" fill="black" />
</mask>
</defs>
<image width="235" height="314"
mask="url(#masking)"
xlink:href="https://scontent-a.xx.fbcdn.net/hphotos-prn1/t1.0-9/p235x165/75938_10152243783285987_398136218_n.jpg" />
</svg>
Fiddle here