I need to add background image in svg. But I'm getting only black rectangle box, the image is not displaying. How to add the background image?
This is my code:
<style>
path {
fill: none;
stroke: #000;
stroke-width: 3px;
stroke-linejoin: round;
stroke-linecap: round;
}
</style>
<svg width="1000" height="700">
<!-- <rect fill="#fff" width="100%" height="100%"></rect> -->
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" x="0" y="0" width="1000" height="700">
<image xlink:href="home/nayana/Documents/Text Editor Files/abstract-hd.jpg" width="600" height="450" />
</pattern>
</defs>
<path d="M5,5 l0,680 l980,0 l0,-680 l-980,0 fill="url(#img1)" />
</svg>
Thanks in advance
Correct a syntax error in the path, you are missing a " at the end and remove fill:none from CSS that is overriding the fill attribute used with the path:
Full code:
path {
stroke: #000;
stroke-width: 3px;
stroke-linejoin: round;
stroke-linecap: round;
}
<svg width="1000" height="700">
<!-- <rect fill="#fff" width="100%" height="100%"></rect> -->
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" x="0" y="0" width="1000" height="700">
<image xlink:href="https://lorempixel.com/600/450/" width="600" height="450" />
</pattern>
</defs>
<path d="M5,5
l0,680 l980,0 l0,-680 l-980,0"
fill="url(#img1)" />
</svg>
Simplest use nowadays is plain <image href="bgnd.png"/>. This also can take x, y, width, height. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image
Related
I have svg icon, looking like add to watchlist but background color doesn't work on the firefox browser, any help will be appreciated.
svg {
background-color: #1ebaed;
border: 1px solid #ffffff;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
<defs>
<image width="40" height="40" id="watchlist" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAAXNSR0IB2cksfwAAAYBQTFRFAAAAAAAAAAAAAAAADw8PJSUlNDQ0Ojo6Ozs7Nzc3LS0tGRkZFxcXUFBQp6en5OTk+Pj4/////Pz88PDwxsbGdHR0Kysrf39/6+vr+/v7tLS0W1tb6enpyMjIe3t7R0dHPT09X19fq6ur7u7unp6eFhYWCgoK7OzsV1dXIiIiurq63t7eNjY2EBAQvb298/PzNTU1Li4uDg4OBQUFtra2SUlJBwcHvLy8fX19ERERrKys/f393NzcHh4e9PT09vb2AQEBkJCQEhISBAQEra2t8vLyISEhpqamOTk50tLSJCQkhoaGZGRkpaWlTExMzc3NlpaWxMTECAgIwsLC4uLiDAwM1dXVQUFBiYmJODg45+fn/v7+Tk5O4eHhjIyMCQkJdXV119fXYmJic3NzMjIyeHh4iIiI2dnZv7+/AgICbm5ueXl5ExMTqampdnZ2Ly8vGxsbGBgYTU1NRkZGSkpKysrK9/f35eXlQkJCx8fHcXFxn5+fpKSkk5OTQ0NDFRUVnB3CTAAAAIB0Uk5T3O3y//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9MrCj1AAABXUlEQVR4nGNgYCQKMDAwMRMFmBgYiVPIOKqQRgpZWNnYOTi5uPEr5OHl4xcQBAIhYRFRMZwKucUlBJGApBQ7doXSMmB5WTl5BUUlZTBbRRVToZoKWEpdA8LV1AJztXXQFerqgSX0DYBsVkMjZmZjE4iAKapCM3OIuyyYmS2tBKxt5JmZbe3AIvYKyAodHCHq1J2YnV1ADFc3ZmZ3iBi/KpJCD6hHPR2YvazBLG9mZh+ooC+SQj+omD8zsxiEFQAMBahgIJLCoGCIWEgQc2gYmBXOzBwBDc5IZM+4RYEFo2OYmdligZJxzMzxsRCFCajBwwYJ7URgwDglJacARVIh6tLQA5wrHSyeYQvhZmZB7M3GjMKcXLCURF5+QaFXEcTRicVYE0VJKVjW2lW4DMwo9w7FmiiAoMJFWwgaKBKVVU5IMhgJN95QMaK6praqrh5VfFBlrpGhkOjCntjqAwB2bUIilx2T4wAAAABJRU5ErkJggg=="/>
</defs>
<style>
tspan { white-space:pre }
</style>
<g id="Mobile View Expanded">
<use id="Watchlist icon" style="mix-blend-mode: lighten" href="#watchlist" x="0" y="0" />
</g>
</svg>
I'm trying to apply mask to transformed svg element (it's simplified, I'm trying to do it with path, but structure is same). If mask is applied to element outside of transformed group, it works as expected. If I try to do the same inside , element just disappears.
HTML:
<svg width="350pt" height="100pt" >
<defs>
<pattern id="circleFill" patternUnits="userSpaceOnUse" width="5" height="5" >
<circle cx="2" cy="2" r="2" fill="red"></circle>
</pattern>
<mask id="circleMask">
<rect x="0" y="0" width="100%" height="100%" fill="url(#circleFill)" />
</mask>
</defs>
<g transform="translate(0,150) scale(.1,-.1)">
<rect class="holder" x="300" y="300" height="1000" width="1000"/>
<rect class="main t" x="350" y="350" height="400" width="400" />
</g>
<rect x="300" y="50" height="50" width="50" class="main masked o" />
</svg>
CSS:
.holder {
fill: darkgray;
stroke: black;
stroke-width: 2px;
}
.o{ fill: red; }
.t{ fill: purple; }
.masked{ mask: url(#circleMask); }
If I add "masked" class to second rect (with classes "main t"), it just disappears.
The following structure works:
<g class="masked">
<g transform="...">
<rect ... />
</g>
</g>
I can't use it because I have more than 50 elements in image that should have the same transform and only some of them should be masked (and there are 5 different masks).
Here's the fiddle: Fiddle
What I'm doing wrong? Is it possible to mask element inside transformed group?
I am trying to set a fill color of a shape from an external svg that I link to inside an HTML document, so I'm using CSS/JS to style.
I'm currently only able to get a stroke to work, but that the fill seems to be overridden. Any help would be greatly appreciated
<svg style="fill:green" viewBox="0 0 1000 1000">
<!-- <image id="one" xlink:href="sears/alt1/body/willis-body.svg#body-windows-left" x="54.5" y="338"/>-->
<use style="fill:orange" class="icon" xlink:href="sears/alt1/body/willis-body.svg#body-windows-left" transform="translate(50 50)"/>
<use style="fill:orange" class="icon" xlink:href="sears/alt1/body/willis-body.svg#body-windows-left" transform="translate(350 50)"/>
</svg>
<style>
/*
#svg {
fill: none;
}
*/
use.icon:hover {
stroke: teal;
width: 100px;
fill: orange !imporant;
}
</style>
When you are going to use <use> its only taking copy of your <circle> obj as you see the code snippet you can style the <circle> and in the same time it will effect the <use>
#circle:hover {
fill: blue;
}
<svg viewBox="0 0 1000 1000">
<circle id="circle" cx="150" cy="150" r="150"/>
<use href="#circle" x="10" fill="red" transform="translate(350 50)"/>
<use href="#circle" x="10" fill="yellow" transform="translate(700 50)"/>
</svg>
and if you want to style the <use>
/* #circle:hover {
fill: blue;
} */
.new:hover {
fill: green;
}
.new2:hover {
fill: pink;
}
<svg viewBox="0 0 1000 1000" id="tr">
<circle id="circle" cx="150" cy="150" r="150"/>
<use href="#circle" x="10" class="new"fill="red" transform="translate(350 50)"/>
<use href="#circle" x="10" class="new2" fill="yellow" transform="translate(700 50)"/>
</svg>
In this example:
https://jsfiddle.net/ywb77uhv/
Why does when changing the strip path color to other than white it breaks the render? How to be able to change the path color?
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<style>
#stripe path {
stroke: #fff;
stroke-width: 2px;
}
.stripe {
mask: url("#mask");
}
.blue.stripe {
fill: #00f;
}
.red.stripe {
fill: #f00;
}
</style>
</head>
<body>
<svg height="500" width="500">
<defs>
<pattern id="stripe" patternUnits="userSpaceOnUse" width="4" height="4">
<path d="M-1,1 l2,-2
M0,4 l4,-4
M3,5 l2,-2" />
</pattern>
<mask id="mask">
<rect height="100%" width="100%" style="fill: url(#stripe)" />
</mask>
</defs>
<g>
<g class="stripe">
<rect width="100" height="50" y="0" />
</g>
<g class="red stripe">
<rect width="100" height="50" y="50" />
</g>
<g class="blue stripe">
<rect width="100" height="50" y="100" />
</g>
</g>
</svg>
</body>
</html>
Because in SVG, a mask uses the luminance of the colors in the mask definition to calculate the alpha value of the mask. White = 100% opacity. Red = 70ish% opacity, blue= teens opacity.
I have 2 SVG rectangles connected by one canvas. I tried HTML5 to make it responsive. SVG is reacting to the code, but the canvas is static, so the connection between them is lost. What can i do?
Try to use an svg element as a ViewBox.
e.g.:
<svg viewBox="0 0 1 1">
<rect width="0.4" height="0.3" y="0" x="0" fill="yellow"/>
<rect width="0.2" height="0.2" y="0" x="0" fill="blue"/>
</svg>
<svg style="position:relative; top: 20x; left: -4px;width: 200; height: 175">
<rect x="5" y="2" rx="20" ry="20" width="100" height="150" style="fill:#FF7070;stroke:black;stroke-width:5;opacity:0.5">
</rect>
</svg>
<svg style="position:absolute; top: 80px; left: 430px">
<rect x="5" y="2" rx="20" ry="20" width="200" height="100" style="fill:#FF7070;stroke:black;stroke-width:5;opacity:0.5">
</rect>
</svg>
<canvas id="canvas1" style=" background-color : gray; position: absolute;top:112px;
left: 110px ;x-index:1;" width="323" height="7" `enter code here`>
</canvas>