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.
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 have the following svg:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg
id="dude"
version="1.1"
baseProfile="basic"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%"
height="100%"
viewBox="0 0 300 300"
preserveAspectRatio="xMidYMid meet"
class="global"
>
<style type="text/css"><![CDATA[
.global {
fill: grey;
}
.dude {
fill: white;
}
]]></style>
<rect x="0" y="0" width="300" height="300" stroke-width="0" />
<g transform="translate(150,375)">
<g class="dude" transform="scale(0.85)">
<circle cx="0" cy="-300" r="90" />
<circle cx="0" cy="-75" r="130" />
</g>
</g>
</svg>
It works fine, but the <rect> is not needed. However when I remove it then the whole svg disappears. I thought maybe its because there is no width and height. But even if I add this via CSS, the svg disappears.
https://jsfiddle.net/L5v9tpsm/
How can I get the circles and background to show, without the <rect>?
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>
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