I have created pill svg which has pattern image. It looks perfect in FF, IE, Edge, but in Chrome, Opera (webkit browsers) image is cut off. This problem is also on Mac in Safari and firefox.
Here is example in codepen: http://codepen.io/reinis/pen/wWXdbz
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 240 240">
<defs>
<pattern id="imgpattern" x="0" y="0" width="1" height="1">
<image width="240" height="240" xlink:href="http://www.vrheadsets3d.com/wp-content/uploads/2016/07/dreams-of-dali-400x400.jpg"/>
</pattern>
</defs>
<path fill="url(#imgpattern)" d="M17.654,17.654C-5.93,41.238-5.878,79.528,17.77,103.176l59.448,59.448l59.606,59.606c23.648,23.648,61.938,23.7,85.522,0.116s23.532-61.874-0.116-85.522l-59.488-59.488L103.176,17.77 C79.528-5.878,41.238-5.93,17.654,17.654z" />
</svg>
Can anybody figure out what is happening?
Just change the viewbox to "0 0 300 300" and the image width and height to 300 as well, and in SVG you will face a lot of issues related with the viewBox, so for better understanding check this link
https://sarasoueidan.com/blog/svg-coordinate-systems/
Related
I'd like to create a responsive SVG that consists of an image clipped by a polygon.
The image needs to preserve its aspect ratio and get cropped, while the polygon needs to adapt in width to its container but preserve the same height.
I don't want the whole thing to scale homothetically.
visual explanation of the issue
If I set preserveAspectRatio="none" to the svg, the polygon stretches like planned, but the image is then distorted. I've tried setting preserveAspectRatio="xMidYmid slice" to the image, but since the svg is set not to have its aspect ratio preserved it doesn't work as planned.
Here's my current code:
<svg viewBox="0 0 1440 810" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="clip">
<polygon points="0 750,1440 810,1440 60,0 0" />
</clipPath>
</defs>
<g aria-hidden="true" clip-path="url(#clip)">
<image
opacity="0.75"
preserveAspectRatio="xMinYMid slice"
xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg/2880px-Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg"
/>
</g>
</svg>
Thanks in advance for your help.
I created an SVG image as defined by the code below. The issue I am having is that the SVG image is being rendered incorrectly. The z-order of the elements in my SVG are incorrectly being rendered.
Issue: There are 3x rectangles (color = white), which are above another rectangle (color=red). These 3x rectangles are positioned to have the same y-axis as the red rectangle behind it and have the same height. Despite this positioning/height, there is a "red" border that seems to be visible on the edge of the white rectangle due to the red rectangle in the back. It seems that z-order or stacking order of the elements in the rendered image is not being respected.
Below is a screenshot of the SVG image open in the Inkscape showing the issue. Even after converting the SVG image to PNG, the z-order issue still existing.
After troubleshooting with the position, I noticed the issue randomly disappears depending on the value of the y-axis position, or SVG image size (pixels/width/height). For example, if you change edit the SVG from y="2.5807" to y="2.5", the issue goes however. However, this is a NOT a feasible solution for my issue, but the exact positing and SVG image size properties is are fixed can shouldn't be changed.
Updates
I tried #Robert Longson suggestion of using shape-rendering="crispEdges" on the root SVG. It did NOT solve the issue for my use case. Using his suggestion, it does solve the issue on how the image is rendered in a browser, however the issue is still visible in Inkscape or when SVG is converted to PNG. For my use case, I care about how the SVG is rendered after being converted to PNG.
I just found out shape-rendering="crispEdges does work when SVG is converted to PNG, but its dependent on how the conversion process works. If I use rsvg-convert command in Bash, which is provided by librsvg2-bin, to convert the SVG to PNG, the issue is fixed. However, if I use convert command in Bash, which is provided by ImageMagick, the issue still exist. If open the SVG file in Inkscape and then Export as PNG, then the issue still exist.
<svg baseProfile="full" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" width="912px" height="1140px" preserveAspectRatio="none" viewBox="0,0,8.0,5.0">
<rect x="0" y="0" width="8.0" height="5.0" fill="white" />
<rect x="0" y="2.5807" width="8.0" height="1.0" fill="red" />
<g transform="translate(2.9275,0)">
<rect x="0" y="2.5807" width="0.5" height="1.0" fill="white" />
<rect x="1.0" y="2.5807" width="1.0" height="1.0" fill="white" />
<rect x="2.5" y="2.5807" width="1.5" height="1.0" fill="white" />
</g>
</svg>
that's antialiasing you can turn it off with shape-rendering="crispEdges"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="912px" height="1140px" preserveAspectRatio="none" viewBox="0,0,8.0,5.0" shape-rendering="crispEdges">
<rect x="0" y="0" width="8.0" height="5.0" fill="white" />
<rect x="0" y="2.5807" width="8.0" height="1.0" fill="red" />
<g transform="translate(2.9275,0)">
<rect x="0" y="2.5807" width="0.5" height="1.0" fill="white" />
<rect x="1.0" y="2.5807" width="1.0" height="1.0" fill="white" />
<rect x="2.5" y="2.5807" width="1.5" height="1.0" fill="white" />
</g>
</svg>
I am trying to make an SVG shape a dropzone, and it works perfectly in Chrome/Firefox, but when testing on Safari I have come across a strange behaviour which I am looking for a way to get round.
The problem (shown in the code below and this fiddle https://jsfiddle.net/tp5e98rs/) is that when the viewBox width/height does not match the view port width/height (the first SVG), a translated element is not positioned correctly when viewed in the inspector. If you inspect the first rectangle, the blue highlight is not directly over it, but if you inspect the second rectangle the blue highlight is, as you can see in the attached image. The difference between the two SVGs is that in one the viewbox doesn't match the view port, and in the other they do match. If you do the same in Chrome, the highlight is correct in both cases.
This is a problem for making dropzones from translated rectangles, because the dropzone ends up being where the incorrect highlight is shown.
Any ideas of a workaround to fix this problem?
<svg width="100" height="100" viewBox="0 0 200 200">
<rect transform="translate(20 20)" width="100" height="100" fill="#aaeeee"></rect>
</svg>
<svg width="100" height="100" viewBox="0 0 100 100">
<rect transform="translate(10 10)" width="50" height="50" fill="#aaeeee"></rect>
</svg>
I try to render some text along a bezier curve path in SVG:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id='menu_path' d="M 80,40 Q 200,85 245,205" stroke="none" fill="none"/>
<text fill="white">
<textPath xlink:href="#menu_path">News Info Presse Musik</textPath>
</text>
</svg>
In Firefox this works fine, but in Chrome and Safari, the text looks ugly (look at "Musik"). Even when I use monospace fonts and set the text to uppercase it does not change.
Here the Screenshots:
http://imageshack.us/a/img18/3195/svgrendering.png
http://imageshack.us/a/img705/7334/svgrenderingwithpath.png
Does somebody have an idea on how to avoid this?
I created a jsfiddle which shows the problem:
http://jsfiddle.net/v6esx/
Thank you!
Can someone tell me what's wrong with this SVG?
IE9 don't apply mask at all.
I found some svg mask examples that WORK in IE9, but didn't found any differences from my code.
I'm using a mask with radial gradient. But even with simple plain colors, it doesn't work.
<mask id="mask">
<rect fill="white" x="15" y="0" width="10" height="200" stroke-width="0"/>
<rect fill="url(#radialGradient)" x="15" y="10" width="10" height="180" stroke-width="0"/>
</mask>
Any help is appreciated.
I ran you code on jsFiddle. The problem is while you are drawing the line, x1 equals to x2. I have changed line's x2 to 21, and it worked.