When I draw SVG stripes with a pattern and print it in Google Chrome, some lines become ugly like this.
This does not happen in other browsers. For example, in Microsoft Edge, like this.
How can I print this properly in Google Chrome? Or is there anything wrong in this code?
Here is my code.
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<defs>
<pattern id="pattern_qET8y" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(45)">
<line x1="0" y="0" x2="0" y2="10" stroke="#24194D" stroke-width="1" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#pattern_qET8y)"/>
</svg>
</body>
</html>
Related
I'm building a painting tool with SVG that has various actions such as painting rectangles and rotating. One of the actions is to add a mask, effectively windowing the content to a specific area. To accomplish this, I'm using the svg mask element. However, when also adding a rotation, it seems that the mask is not working and the elements are rendering weirdly.
This is an example SVG:
`
<svg width="50%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-250 -300 500 600">
<defs>
<mask id="57656">
<rect fill="black" x="-250" y="-300" width="500" height="600"></rect>
<rect fill="white" x="-72" y="-141" width="235" height="287"></rect>
</mask>
</defs>
<g transform="rotate(20)">
<g mask="url(#57656)">
<rect x="0" y="202" width="271" height="118" fill="rgb(128,237,51)" opacity="0.21"></rect>
<rect x="3" y="167" width="313" height="318" fill="rgb(152,28,5)" opacity="0.58"></rect>
<rect x="-65" y="-40" width="317" height="222" fill="rgb(74,103,68)" opacity="0.29"></rect>
</g>
</g>
</svg>
`
how it should look (on firefox and safari)
how it looks on chrome
how it looks on chrome without rotation
What could be causing this? is it a bug? I've also tried style="transform: rotateZ(20)" but that has the same issue.
Apparently, this issue is also related to transparency rendering.
Replacing opacity with fill-opacity applid to masked elements fixed this bug for me.
svg {
width: 20em;
border: 1px solid #ccc
}
<svg width="50%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-250 -300 500 600">
<defs>
<mask id="m57656">
<rect fill="black" x="-250" y="-300" width="500" height="600"></rect>
<rect fill="white" x="-72" y="-141" width="235" height="287"></rect>
</mask>
</defs>
<g transform="rotate(20)">
<g mask="url(#m57656)">
<rect x="0" y="202" width="271" height="118" fill="rgb(128,237,51)" fill-opacity="0.21"></rect>
<rect x="3" y="167" width="313" height="318" fill="rgb(152,28,5)" fill-opacity="0.58"></rect>
<rect x="-65" y="-40" width="317" height="222" fill="rgb(74,103,68)" fill-opacity="0.29"></rect>
</g>
</g>
</svg>
This simple SVG will display (a fat line) in FF, but will display nothing in Chrome (tried it on v58.0.3029.110 on Linux).
Why is this happening?
Is SVG buggy in browsers, in general? I'm trying to create a simple charting library, but if I get such erratic behaviour, I don't know what I should do.
<!doctype html>
<html>
<head>
<title>Works on FF, doesn't work on Chrome</title>
</head>
<body>
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="-1 1.007230, 2 0.000840" preserveAspectRatio="none" style="border: 1px solid blue;">
<line x1="0" x2="0" y1="1.0073" y2="1.008" stroke-width="1" stroke="black" />
</svg>
</body>
</html>
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="-1 1.007230, 2 0.000840" preserveAspectRatio="none" style="border: 1px solid blue;">
<line x1="0" x2="0" y1="1.0073" y2="1.008" stroke-width="1" stroke="black" />
</svg>
I don't know much about SVG - was just trying to learn a bit. So, I went to the Wikipedia SVG Example
and thought "Oh, can I just embed XML like that in my web page?" Tried it, and bascially, yes, you can, but the image I see rendered in Chrome (Version 45.0.2454.101 m running on Windows Enterprise 7) is cutoff right about the Y=150 mark (Y = 150 on the Wikipedia page's grid).
Same web page rendered under IE looks just like the image on the Wikipedia page.
Same web page viewed under Firefox is also cut off like Chrome. So it seems like IE is getting something right here that Chrome and Firefox are getting wrong.
Here is the whole source of the web page I am viewing:
<html>
<head>
<title>SVG test</title>
</head>
<body>
<h1>SVG test</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
<circle cx="125" cy="125" r="75" fill="orange" />
<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</svg>
The HTML doesn't get much simpler than this. What is the issue here? Any easy way to make Chrome and Firefox render the whole image (i.e., like IE does)?
Thanks!
You need to supply width and height attributes (or styles). Without that the outer <svg> element defaults to 300 x 150px in size.
html, body {
width: 100%;
height: 100%;
}
<html>
<head>
<title>SVG test</title>
</head>
<body>
<h1>SVG test</h1>
<svg width="100%" height="100%">
<rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
<circle cx="125" cy="125" r="75" fill="orange" />
<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</svg>
Firefox and Chrome are right and IE is wrong in this case.
my svg is just text over a circke with full screen rectangle
svg
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red"/>
<circle cx="150" cy="100" r="80" fill="green"/>
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">Hello SVG</text>
</svg>
When in img src it is arbitriraly truncated at the bottom why ? How to fix this ?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<img src="hello.svg" type="image/svg+xml">
</body>
</html>
Specify the width, height and viewPort attributes of svg.
<svg version="1.1" width="300" height="200" viewPort="0 0 300 200" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">Hello SVG</text>
</svg>
You have not specified any size for the <img> or <svg> so the browser is choosing the default size for indeterminate sized objects, which is 300x150. So your circle will get cut off at the bottom. The solution, as chipChocolate has already pointed out, is to give one or the other an appropriate size.
My code below is not working as expected. Not showing the image in the background of the rectangle.
<html>
<body>
<svg width="600" height="700">
<rect width="300" height="400" class="eq__NEcontainer__currentAlarmAction" style="fill:url(#godhelpme);">
<title stroke="blue">My test</title>
</rect>
<defs id="godhelpme">
<pattern width="200" height="200" x="0" y="0" patternUnits="userSpaceOnUse">
<image width="200" height="200" class="eq__NEcontainer__currentAlarmAction" xlink:href="CurrentList.png"></image>
</pattern>
</defs>
</svg>
</body>
</html>
The rectangle is always black as in the image. Any ideas ?. I have tried debugging using chrome. In the debugger clicking on the image tag shows empty. I have attached the images for reference.. Any help would be of greatly appreciated.
You cannot reference a <defs> element as the fill, you want the <pattern>. So put the id on the <pattern> element instead. Also in general you should aim to put your <defs> elements before where they're used, it's more efficient that way.
Like this:
<html>
<body>
<svg width="600" height="700">
<defs>
<pattern id="godhelpme" width="200" height="200" x="0" y="0"
patternUnits="userSpaceOnUse">
<image width="200" height="200"
class="eq__NEcontainer__currentAlarmAction"
xlink:href="CurrentList.png"></image>
</pattern>
</defs>
<rect width="300" height="400" class="eq__NEcontainer__currentAlarmAction"
style="fill:url(#godhelpme);">
<title stroke="blue">My test</title>
</rect>
</svg>
</body>
</html>