I have a really odd Safari bug. I have an image inside an SVG shape path, here's the code:
<svg viewBox="0 0 367 367" height="367" width="367" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="bias" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
<image height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="https://upload.wikimedia.org/wikipedia/commons/c/cb/ADAC-Zentrale%2C_Munich%2C_March_2017-01.jpg"/>
</pattern>
</defs>
<path d="M0,183.5 L0,0 L183.5,0 C284.844252,0 367,82.1557484 367,183.5 C367,284.844252 284.844252,367 183.5,367 C82.1557484,367 0,284.844252 0,183.5 Z" fill="url(#bias)"></path>
</svg>
The image renders fine on the home page but the same code on all other pages renders the shape as black and no image, although in the inspector I can see the image is loaded. All other browsers it's fine.
The left shape is an example of it rendering correctly on the home page and the right is how it renders on every other page. Same template, same code.
Any ideas? Been pulling my hair out for hours, thanks.
Turns out it was a <base> tag in the head messing with the relative url.
Similar issue to this issue SVG Gradient turns black when there is a BASE tag in HTML page?
Thanks
Related
I have an SVG that was provided to me by a designer. It was created in and exported from Illustrator using File > Export > As SVG. It should be a circle with a gradient effect but in IE / Edge it just shows as a solid colour.
I have tested this in all other browsers and it works fine.
Is anyone able to see what the problem is?
Here is the SVG content:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="368.7939mm" height="368.7939mm" viewBox="0 0 1045.4 1045.4001">
<defs>
<style>.a{fill:url(#a);}</style>
<linearGradient id="a" x1="1052.9643" y1="795.8587" x2="1053.9644" y2="795.8587" gradientTransform="matrix(1045.3361, 0, 0, -1045.3359, -1100580.4792, 832495.0613)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#27347f"/>
<stop offset="0.9997" stop-color="#8c9090"/>
</linearGradient>
</defs>
<title>circle-test</title>
<path class="a" d="M643.8,32.7c-288.7,0-522.7,234-522.7,522.7s234,522.7,522.7,522.7,522.7-234,522.7-522.7S932.5,32.7,643.8,32.7Zm0,837.1c-173.7,0-314.5-140.8-314.5-314.5S470.1,240.8,643.8,240.8,958.3,381.6,958.3,555.3,817.5,869.8,643.8,869.8Z" transform="translate(-121.1 -32.7)"/>
</svg>
Note: I'm not using this code inline. This code is placed inside a .svg file which is just included in the page like a normal image file.
Thank you!
I'm using an svg <pattern> with an <image> that references a <filter>. My image will be scaled down to fit using preserveAspectRatio. It works as expected on Chrome, and Edge, but on Firefox the <filter> tag causes the image to be unexpectedly cropped. I have tried many different ways of defining coordinates to attempt to avoid this problem but so far haven't found a solution.
Oddly, I just realized that if I set my screen scaling to 150% from 100% in Windows display settings, the problem goes away and firefox displays the same as Chrome.
So, questions:
Is this a bug in Firefox?
Is there a way I can stop it from happening (force expand the filter bounding box, I guess, except I've tried to do that every which way)?
Here is a codepen demonstrating the problem:
https://codepen.io/foobarbecue/pen/xvpOBm
Results on Chrome:
Results on Firefox:
Code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<svg height="500" width="500">
<filter id="blur">
<feGaussianBlur stdDeviation="0"></feGaussianBlur>
</filter>
<pattern id="imgpattern" x="0" y="0" width="1" height="1"
viewBox="0 0 1024 576" preserveAspectRatio="xMidYMid slice" >
<image width="1024" height="576" xlink:href="http://i.stack.imgur.com/4SrQ8.jpg" filter="url(#blur)"/>
</pattern>
<path class="hexTile" d="M75 -1 h150 l75 129.90 l-75 129.90 h-150 l-75 -129.9 Z"
fill=url("#imgpattern")
stroke="black"></path>
</svg>
</body>
</html>
This is a Firefox bug - but there seems to be a workaround. If you get rid of preserveAspectRatio/viewBox inside the pattern and instead set patternContentUnits to objectBoundingBox, express the filter stdDeviation as objectBoundingBox as well (although technically it shouldn't be) AND, choose magic values for the pattern dimensions - you can get something that works in Firefox. (The filter magically uncrops when the height is set to 1.2 - not 1.1, not 1.3 - just 1.2)
<svg x="0px" y="0px" height="500px" width="500px" >
<defs>
<filter id="blur" y="0%" height="100%" x="0%" width="100%">
<feGaussianBlur stdDeviation=".01"></feGaussianBlur>
</filter>
<pattern id="imgpattern" x="-.5" y="0" width="1.5" height="1.2"
patternContentUnits="objectBoundingBox">
<image width="2" height="1" xlink:href="http://i.stack.imgur.com/4SrQ8.jpg" filter="url(#blur)"/>
</pattern>
</defs>
<path class="hexTile" d="M75 0 h150 l75 129.90 l-75 129.90 h-150 l-75 -129.9 L 75 0"
fill=url("#imgpattern")
stroke="black" ></path>
</svg>
I have to use CKEditor to allow users to edit some HTLM pages that may include SVG images. And the links defined in those SVG images contain some attribute like xlink:href. E.g:
<svg preserveaspectratio="xMinYMin meet" version="1.1" viewbox="0 0 778 873" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="100%" width="100%" xlink:href="map.png"></image>
<g class="hover_group" opacity="1">
<a xlink:href="http://www.google.com">
<rect fill="red" height="100" opacity="0.0" width="160" x="110" y="240"></rect>
</a>
</g>
</svg>
I already set CKEDITOR.config.allowedContent = true with hope that all tags and attributes will be retained by the editor.
However, when I switch back and forth between WYSIWYG and HTML mode, I notice that the A tag become like this:
a href="http://www.google.com" xlink:=""
<svg preserveaspectratio="xMinYMin meet" version="1.1" viewbox="0 0 778 873" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="100%" width="100%" xlink:href="map.png"></image>
<g class="hover_group" opacity="1">
<a href="http://www.google.com" xlink:="">
<rect fill="red" height="100" opacity="0.0" width="160" x="110" y="240"></rect>
</a>
</g>
</svg>
This behavior only happens to the A tag, not the IMAGE tag.
Of course, this makes the link in SVG file no longer work.
Anyone know how to fix this? Thanks. I don't want to manually allow all the allowed tags or attributes because this may be so much work.
It is a bug (called also "lack of feature") in CKEditor. It's not able to process attributes ending with ":href" properly.
I reported http://dev.ckeditor.com/ticket/13233 which also includes a possible patch. If it's correct, then this issue will be fixed in the next minor release.
So i'm busy with SVG and i need a couple of images in my project. So you have the element . You can also give the height and width. The given picture doesn't resize to the height and width you give to the image element.
I have this code:
<g class="node image" transform="translate(0,129.652067739873)" type="ad">
<image href="content/image/image.png" height="30px" width="100px" y="41.94444444444444" x="0">
<title>google.nl</title>
</image>
<text y="56.625" x="106" dy=".35em" text-anchor="start">google.nl</text>
</g>
Now i want that the image.png cover the whole image element. Like background-size:cover; But that doesn't work, and i can't find any attribute who can do this. Is there a way to do this in a correct way?
Try setting preserveAspectRatio="none" for the <image> element. Also, if you want it to cover all of the svg, set width and height to '100%'
<image href="content/image/image.png" height="100%" width="100%" y="41.94444444444444" x="0" preserveAspectRatio="none">
I have an SVG image that specifies a specific height and width. All the objects in the SVG image are created to use this width and height. Something like this:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="600">
<g>
<circle cx="300" cy="300" r="295" fill="red" stroke="black" stroke-width="10"/>
</g>
</svg>
Which makes a 600 pixel red circle with a black border:
How do I scale this SVG image (to say 200x200) without having to go through and update all the objects (in this case just the red circle) contained within it?
To resize an SVG image you need to introduce a viewBox attribute that contains the the original size pixels. Then you can change the width and height to whatever you want.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="0 0 600 600">
<g>
<circle cx="300" cy="300" r="295" fill="red" stroke="black" stroke-width="10"/>
</g>
</svg>
That way the coordinate system to which the image is drawn is still the original 600x600, but the image displays scaled to 200x200.
Alternate method: assuming that all these SVG images are individual files, you can use either <object>, <embed> or <img> tag to reference this SVG file, then set width=200 and height=200 to rescale it.
Eg: <img src="path/to/somefile.svg" width="200" height="200"...../>