While making an image editor I made 9 input ranges for all the 9 filter styles in CSS. In JavaScript I was able to give all those input ranges an event listener so that whenever a range was changed then a function gets executed. Now all that works fine and when you do a
console.log(inputRanges);
The value gets updated successfully but the problem is that I am not able to update the image styles with JavaScript. I have tried:
image.style.filter = settings
image.style.filter = // concatination of settings
none of them are working and I really don't know why.
You can have a look at my code here:
const inputRanges = document.querySelectorAll('input[type="range"]');
inputRanges.forEach((inputRange) => {
inputRange.addEventListener("change", () => {
console.log(inputRanges);
let blur = document.getElementById("blur").value;
let brightness = document.getElementById("brightness").value;
let contrast = document.getElementById("contrast").value;
let saturation = document.getElementById("saturation").value;
let grayscale = document.getElementById("grayscale").value;
let hue = document.getElementById("hue").value;
let opacity = document.getElementById("opacity").value;
let invert = document.getElementById("invert").value;
let sepia = document.getElementById("sepia").value;
let settings;
const image = document.getElementById('previewImage');
settings = "blur(" + blur + "px) brightness(" + brightness + "%) contrast(" + contrast + "%) saturation(" + saturation + "%) grayscale(" + grayscale + "%) hue(" + hue + "deg) opacity(" + opacity + "%) invert(" + invert + "%) sepia(" + sepia / 100 + "%)";
image.style.filter = settings;
});
});
body{
display: flex;
justify-content: center;
margin: 0;
padding: 20px;
box-sizing: border-box;
font-family: poppins;
}
img {
display: block;
width: 400px;
height: 266.5px;
border: 10px solid black;
}
#image{
overflow: hidden;
}
#container {
display: flex;
flex-direction: column;
background: #383838;
align-items: center;
width: fit-content;
border-radius: 20px;
padding: 30px;
}
input[type="range"]{
display: block;
width: 300px
}
#setting{
height: 50px;
width: 400px;
border-radius: 25px;
background-color: white;
margin: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Editor</title>
</head>
<body>
<div id='container'>
<div id="image">
<img id="previewImage" src="toy car.jpg" alt="Toy Car">
</div>
<div id="settings">
<div id="setting">
Blur:
<input type="range" id="blur" min='0' max='20' value="0">
</div>
<div id="setting">
Brightness:
<input type="range" id="brightness" min='0' max='200' value="100">
</div>
<div id="setting">
Contrast:
<input type="range" id="contrast" min='0' max='500' value='100'>
</div>
<div id="setting">
Saturation:
<input type="range" id="saturation" min='0' max='500' value='100'>
</div>
<div id="setting">
Grayscale:
<input type="range" id="grayscale" min='0' max='100' value='0'>
</div>
<div id="setting">
Hue:
<input type="range" id="hue" min='0' max='360' value='0'>
</div>
<div id="setting">
Invert:
<input type="range" id="invert" min='0' max='100'>
</div>
<div id="setting">
Opacity:
<input type="range" id="opacity" min='0' max='100' value="100">
</div>
<div id="setting">
Sepia:
<input type="range" id="sepia" min='0' max='100' value="0">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I don't think you will be able to see the image like this the image link is here:
https://images.pexels.com/photos/386010/pexels-photo-386010.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500
You have two filters named wrong, change hue to hue-rotate and saturation to saturate. Source: https://www.w3schools.com/cssref/css3_pr_filter.asp
Replace settings with
settings = `blur(${blur}px) brightness(${brightness}%) contrast(${contrast}%) saturate(${saturation}%) grayscale(${grayscale}%) hue-rotate(${hue}deg) opacity(${opacity}%) invert(${invert}%) sepia(${sepia}%)`;
This Codepen is similar; worth a look.
/* The main module for this is external. */
const elements = document.querySelectorAll('[data-js="filter"]');
if (elements.length) {
import('https://elements.stoumann.dk/assets/js/css-filter.mjs')
.then(module => {
const jsClass = module.default;
elements.forEach(element => {
new jsClass(element, element.dataset, presets);
});
})
}
/* Default presets for localhost demo / or when REST API fails */
const presets = [
{
"name": "watercolor",
"description": "",
"value": "url('#squiggly-1') brightness(1.3) invert(0.17) saturate(2.6) sepia(0.25)",
"values": [
{
"brightness": 1.3,
"invert": 0.17,
"saturate": 2.6,
"sepia": 0.25,
"url": "url('#squiggly-1')"
}
]
},
{
"name": "faded-photo",
"description": "",
"value": "blur(0.2px) brightness(1.1) hue-rotate(5deg) opacity(0.9) saturate(1.3) sepia(0.4)",
"values": [
{
"blur": 0.2,
"brightness": 1.1,
"hue-rotate": 5,
"opacity": 0.9,
"saturate": 1.3,
"sepia": 0.40
}
]
},
{
"name": "old-horror",
"description": "",
"value": "url('#grain') grayscale(1) sepia(0.5) brightness(1.3) invert(0.8)",
"values": [
{
"url": "url('#grain')",
"grayscale": 1,
"sepia": 0.5,
"brightness": 1.3,
"invert": 0.8
}
]
},
{
"name": "old-grainy",
"description": "",
"value": "url('#grain') grayscale(0.6) sepia(0.5) brightness(1.5)",
"values": [
{
"url": "url('#grain')",
"grayscale": 0.6,
"sepia": 0.5,
"brightness": 1.5
}
]
},
{
"name": "fade-out",
"description": "",
"value": "brightness(0.8) hue-rotate(350deg) saturate(3) blur(8px) contrast(0.6)",
"values": [
{
"brightness": 0.8,
"hue-rotate": 350,
"saturate": 3,
"blur": 8,
"contrast": 0.6
}
]
},
{
"name": "mist",
"description": "",
"value": "url('#fluffy') brightness(0.8) saturate(0.8)",
"values": [
{
"url": "url('#fluffy')",
"brightness": 0.8,
"saturate": 0.8
}
]
}
];
<div data-js="filter"
data-filter-file="#svgfilters"
data-lbl-app-header="CSS <code>filter</code> Editor"
data-preview-image="https://elements.stoumann.dk/assets/img/filter01.jpg,https://elements.stoumann.dk/assets/img/filter02.jpg,https://elements.stoumann.dk/assets/img/filter03.jpg,https://elements.stoumann.dk/assets/img/filter04.jpg,https://elements.stoumann.dk/assets/img/filter05.jpg">
</div>
<svg id="svgfilters" aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="teal-white" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.03 1"/>
<feFuncG type="table" tableValues="0.57 1"/>
<feFuncB type="table" tableValues="0.49 1"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="teal-lightgreen" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.03 0.8"/>
<feFuncG type="table" tableValues="0.57 1"/>
<feFuncB type="table" tableValues="0.49 0.53"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="sepia" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.26 0.95"/>
<feFuncG type="table" tableValues="0.19 0.78"/>
<feFuncB type="table" tableValues="0.11 0.59"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="purple-sepia" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.43 0.97"/>
<feFuncG type="table" tableValues="0.06 0.88"/>
<feFuncB type="table" tableValues="0.37 0.79"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="cherry-icecream" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.84 1"/>
<feFuncG type="table" tableValues="0.05 0.94"/>
<feFuncB type="table" tableValues="0.37 0.61"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="blackCurrant-and-mint" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.75 0.53"/>
<feFuncG type="table" tableValues="0.25 0.97"/>
<feFuncB type="table" tableValues="0.64 0.77"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="sea" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.02 0.13 0.8"/>
<feFuncG type="table" tableValues="0.02 0.47 0.97"/>
<feFuncB type="table" tableValues="0.26 0.52 0.48"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="warm-sea" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.29 0.01 0.97"/>
<feFuncG type="table" tableValues="0.12 0.52 0.94"/>
<feFuncB type="table" tableValues="0.37 0.59 0.47"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="spring-grass" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0 0.38 0.92"/>
<feFuncG type="table" tableValues="0.5 0.8 1"/>
<feFuncB type="table" tableValues="0.5 0.56 0.74"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="red-sunset-with-purple" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.52 0.86 0.97"/>
<feFuncG type="table" tableValues="0 0.08 0.81"/>
<feFuncB type="table" tableValues="0.51 0.24 0.05"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="red-sunset" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.27 0.86 0.97"/>
<feFuncG type="table" tableValues="0.01 0.08 0.81"/>
<feFuncB type="table" tableValues="0.02 0.24 0.05"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="gold-sunset" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.27 0.86 1"/>
<feFuncG type="table" tableValues="0.01 0.31 0.95"/>
<feFuncB type="table" tableValues="0.02 0.02 0.02"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="dark-crimson-sepia" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.01 0.52 0.97"/>
<feFuncG type="table" tableValues="0 0.05 0.81"/>
<feFuncB type="table" tableValues="0.02 0.29 0.61"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="dark-blue-sepia" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.29 0.15 0.97"/>
<feFuncG type="table" tableValues="0.04 0.39 0.93"/>
<feFuncB type="table" tableValues="0.32 0.52 0.73"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="dark-green-sepia" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.25 0.39 0.96"/>
<feFuncG type="table" tableValues="0.16 0.52 0.97"/>
<feFuncB type="table" tableValues="0.06 0.39 0.78"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="x-rays" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.98 0.3 0.25"/>
<feFuncG type="table" tableValues="1 0.44 0.24"/>
<feFuncB type="table" tableValues="0.91 0.62 0.39"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="warm-x-rays" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.98 0.75 0.51"/>
<feFuncG type="table" tableValues="1 0.45 0.11"/>
<feFuncB type="table" tableValues="0.91 0.39 0.29"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="golden-x-rays" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.98 1 0.94"/>
<feFuncG type="table" tableValues="1 0.98 0.44"/>
<feFuncB type="table" tableValues="0.91 0.43 0.02"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="purple-warm" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.52 0.97 1"/>
<feFuncG type="table" tableValues="0 0.62 1"/>
<feFuncB type="table" tableValues="0.51 0.39 0.89"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="green-pink-acid" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="1 0.98 0.1"/>
<feFuncG type="table" tableValues="0.17 1 0.82"/>
<feFuncB type="table" tableValues="0.7 0.84 0.67"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="yellow-blue-acid" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.01 0.97 0.89"/>
<feFuncG type="table" tableValues="0.38 1 1"/>
<feFuncB type="table" tableValues="1 0.89 0.01"/>
<feFuncA type="table" tableValues="0 1"/>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
<filter id="noise" x="0%" y="0%" width="100%" height="100%">
<feTurbulence baseFrequency="0.01 0.4" result="NOISE" numOctaves="2" />
<feDisplacementMap in="SourceGraphic" in2="NOISE" scale="20" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap>
</filter>
<filter id="squiggly-0">
<feTurbulence id="turbulence1" baseFrequency="0.02" numOctaves="3" result="noise" seed="0" />
<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6" />
</filter>
<filter id="squiggly-1">
<feTurbulence id="turbulence2" baseFrequency="0.02" numOctaves="3" result="noise" seed="1" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
</filter>
<filter id="squiggly-2">
<feTurbulence id="turbulence3" baseFrequency="0.02" numOctaves="3" result="noise" seed="2" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
</filter>
<filter id="squiggly-3">
<feTurbulence id="turbulence4" baseFrequency="0.02" numOctaves="3" result="noise" seed="3" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
</filter>
<filter id="squiggly-4">
<feTurbulence id="turbulence5" baseFrequency="0.02" numOctaves="3" result="noise" seed="4" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
</filter>
<filter id="posterize">
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 .5 1" />
</feComponentTransfer>
</filter>
<filter id="dancing" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
<feMorphology operator="dilate" radius="4 4" in="SourceAlpha" result="morphology"/>
<feFlood flood-color="#30597E" flood-opacity="1" result="flood"/>
<feComposite in="flood" in2="morphology" operator="in" result="composite"/>
<feComposite in="composite" in2="SourceAlpha" operator="out" result="composite1"/>
<feTurbulence type="fractalNoise" baseFrequency="0.01 0.02" numOctaves="1" seed="0" stitchTiles="stitch" result="turbulence"/>
<feDisplacementMap in="composite1" in2="turbulence" scale="17" xChannelSelector="A" yChannelSelector="A" result="displacementMap"/>
<feMerge result="merge">
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="displacementMap"/>
</feMerge>
</filter>
<filter id="drops" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feTurbulence type="turbulence" baseFrequency="0.05 0.05" numOctaves="1" seed="3" stitchTiles="stitch" result="turbulence"/>
<feComposite in="turbulence" in2="SourceGraphic" operator="in" result="composite"/>
<feColorMatrix type="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 25 -2" in="composite" result="colormatrix"/>
<feComposite in="SourceGraphic" in2="colormatrix" operator="in" result="composite1"/>
<feGaussianBlur stdDeviation="3 3" in="composite1" result="blur"/>
<feSpecularLighting surfaceScale="2" specularConstant="1" specularExponent="20" lighting-color="#fffffd" in="blur" result="specularLighting">
<feDistantLight azimuth="-90" elevation="150"/>
</feSpecularLighting>
<feSpecularLighting surfaceScale="2" specularConstant="1" specularExponent="20" lighting-color="#cae1fe" in="blur" result="specularLighting1">
<feDistantLight azimuth="90" elevation="150"/>
</feSpecularLighting>
<feSpecularLighting surfaceScale="7" specularConstant="1" specularExponent="35" lighting-color="#fcfeff" in="blur" result="specularLighting2">
<fePointLight x="150" y="50" z="300"/>
</feSpecularLighting>
<feComposite in="specularLighting" in2="composite1" operator="in" result="composite2"/>
<feComposite in="specularLighting2" in2="composite1" operator="in" result="composite3"/>
<feComposite in="specularLighting1" in2="composite1" operator="in" result="composite4"/>
<feBlend mode="multiply" in="composite4" in2="SourceGraphic" result="blend"/>
<feBlend in="composite2" in2="blend" result="blend1"/>
<feBlend in="composite3" in2="blend1" result="blend2"/>
</filter>
<filter id="grain">
<feTurbulence baseFrequency="0.60,0.90" result="colorNoise" />
<feColorMatrix in="colorNoise" type="matrix" values=".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0"/>
<feComposite operator="in" in2="SourceGraphic" result="monoNoise"/>
<feBlend in="SourceGraphic" in2="monoNoise" mode="multiply" />
</filter>
<filter id="fluffy" x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.04" result="fluffyNoise" numOctaves="5" />
<feColorMatrix in="fluffyNoise" type="matrix" values=".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0"/>
<feComposite operator="in" in2="SourceGraphic" result="monoFluffyNoise"/>
<feBlend in="SourceGraphic" in2="monoFluffyNoise" mode="screen" />
</filter>
</defs>
</svg>
Related
In iOS Safari, the second rect disappears, why?
I expect it to display properly in iOS.
<svg style="width:800px; height:500px; display: inline;" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="myfilter" width="180%" height="160%" y="-30%" x="-40%">
<feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
<feComponentTransfer result="blur">
<feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
</feComponentTransfer>
<feFlood flood-color="#221D4E" flood-opacity="0.9" result="color"></feFlood>
<feComposite in="color" in2="blur" operator="in" result="glow"></feComposite>
<feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
<feOffset dx="0" dy="0"></feOffset>
<feComponentTransfer result="shadow">
<feFuncR type="table" tableValues="1 1"></feFuncR>
<feFuncG type="table" tableValues="0.67 0.67"></feFuncG>
<feFuncB type="table" tableValues="0.21 0.21"></feFuncB>
<feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
</feComponentTransfer>
<feComposite in="glow" in2="shadow" operator="over" result="highlight" />
<feComposite in="SourceGraphic" in2="highlight" operator="over" />
</filter>
</defs>
<g transform="translate(0,25)">
<rect width="100" height="100" fill="red" x="100" style="filter:url(#myfilter)"></rect>
<rect width="100" height="20000" fill="red" x="250" style="filter:url(#myfilter)"></rect>
</g>
</svg>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
</head>
<body>
<svg style="width:800px; height:500px; display: inline;" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="myfilter" width="180%" height="160%" y="-30%" x="-40%">
<feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
<feComponentTransfer result="blur">
<feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
</feComponentTransfer>
<feFlood flood-color="#221D4E" flood-opacity="0.9" result="color"></feFlood>
<feComposite in="color" in2="blur" operator="in" result="glow"></feComposite>
<feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
<feOffset dx="0" dy="0"></feOffset>
<feComponentTransfer result="shadow">
<feFuncR type="table" tableValues="1 1"></feFuncR>
<feFuncG type="table" tableValues="0.67 0.67"></feFuncG>
<feFuncB type="table" tableValues="0.21 0.21"></feFuncB>
<feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
</feComponentTransfer>
<feComposite in="glow" in2="shadow" operator="over" result="highlight" />
<feComposite in="SourceGraphic" in2="highlight" operator="over" />
</filter>
</defs>
<g transform="translate(0,25)">
<rect width="100" height="100" fill="red" x="100" style="filter:url(#myfilter)"></rect>
<rect width="100" height="20000" fill="red" x="250" style="filter:url(#myfilter)"></rect>
</g>
</svg>
</body>
</html>
chrome
enter image description here
iOS Safari
enter image description here
I expect it to display properly in iOS
iOS has a lot of memory optimizations. Your second rect is very large and mostly outside the initial viewBox, so iOS does not render the filter because it's taking up too much memory for off-screen rendering.
When you change the height of the rect (I'm on iPhone 12 Pro (128GB), iOS 16.1.1), the second rect disappears exactly at height = "6473" - so the largest rect height that this filter will support is 6472 on my phone.
Does this make any sense - probably not, but welcome to Apple's web team.
Here is the svg. It's a slider with the green bulge at the top of it.
I have to move the green bulge like a slider button on the svg path and as it moves ahead the slider should turn green.That slider should move when we scroll down the page. It should be on scroll.
I know that I can calculate the stroke length and gap length and can change the stroke-dasharray property. But still not getting it to do in a perfect way.
<svg xmlns="http://www.w3.org/2000/svg" width="57" height="820" viewBox="0 0 57 820" fill="none">
<path d="M14 812C14 813.105 14.8954 814 16 814C17.1045 814 18 813.105 18 812L14 812ZM14 -8.74228e-08L14 812L18 812L18 8.74228e-08L14 -8.74228e-08Z" fill="#E8E8E8"/>
<path d="M36 812H16" stroke="#E8E8E8" stroke-width="4" stroke-linecap="round"/>
<path d="M14 104C14 105.105 14.8954 106 16 106C17.1046 106 18 105.105 18 104L14 104ZM14 -8.74228e-08L14 104L18 104L18 8.74228e-08L14 -8.74228e-08Z" fill="#3DCD58"/>
<g filter="url(#filter0_d_6_14)">
<path d="M15.2627 91.1843L16 91L16.7373 91.1843C17.5428 91.3857 18.2289 91.912 18.6321 92.6378L22.0631 98.8136C24.1837 102.631 24.0635 107.298 21.7492 111.001L18.8813 115.59C18.333 116.467 17.3716 117 16.3373 117H15.6627C14.6284 117 13.667 116.467 13.1187 115.59L10.2508 111.001C7.93651 107.298 7.81629 102.631 9.9369 98.8136L13.3679 92.6378C13.7711 91.912 14.4572 91.3857 15.2627 91.1843Z" fill="#3DCD58"/>
</g>
<path d="M46.7656 819.984H40.6406C39.0729 819.984 37.8333 819.492 36.9219 818.508C35.8646 817.414 35.3724 816.01 35.4453 814.297C35.4818 813.932 35.6641 813.75 35.9922 813.75C36.2474 813.75 36.5755 813.641 36.9766 813.422C37.5234 813.13 37.7969 812.656 37.7969 812C37.7969 811.38 37.5052 810.888 36.9219 810.523C36.5208 810.305 36.1927 810.195 35.9375 810.195C35.6094 810.159 35.4453 809.958 35.4453 809.594C35.4453 807.807 35.9557 806.422 36.9766 805.438C37.9974 804.453 39.2188 803.979 40.6406 804.016H46.7656C46.9115 804.016 47.0391 804.089 47.1484 804.234C47.2943 804.344 47.3672 804.471 47.3672 804.617V806.969H54.5859C55.1328 806.969 55.5885 807.151 55.9531 807.516C56.3177 807.88 56.5 808.372 56.5 808.992C56.5 809.576 56.3177 810.049 55.9531 810.414C55.5885 810.742 55.1328 810.906 54.5859 810.906H47.0391C46.8932 810.906 46.7656 810.852 46.6562 810.742C46.5469 810.596 46.4922 810.451 46.4922 810.305C46.4922 810.122 46.5469 809.977 46.6562 809.867C46.7656 809.758 46.8932 809.703 47.0391 809.703H54.5859H54.6406C54.8594 809.703 55.0234 809.648 55.1328 809.539C55.2786 809.393 55.3516 809.193 55.3516 808.938C55.3516 808.609 55.2422 808.391 55.0234 808.281C54.9141 808.208 54.7682 808.172 54.5859 808.172H46.7656C46.5833 808.172 46.4375 808.117 46.3281 808.008C46.2188 807.898 46.1641 807.753 46.1641 807.57V805.219H40.6406H40.5859C39.4557 805.219 38.526 805.583 37.7969 806.312C37.1042 806.969 36.7214 807.917 36.6484 809.156C36.9401 809.229 37.2318 809.357 37.5234 809.539C38.4714 810.086 38.9453 810.906 38.9453 812C38.9453 812.62 38.7995 813.148 38.5078 813.586C38.2526 813.951 37.9062 814.242 37.4688 814.461C37.2135 814.607 36.9401 814.716 36.6484 814.789C36.7214 816.029 37.0859 817.013 37.7422 817.742C38.4349 818.435 39.401 818.781 40.6406 818.781H46.1641V816.43C46.1641 816.284 46.2188 816.156 46.3281 816.047C46.4375 815.901 46.5833 815.828 46.7656 815.828H54.4766H54.5312C54.8229 815.865 55.0417 815.792 55.1875 815.609C55.2969 815.5 55.3516 815.336 55.3516 815.117C55.3516 814.862 55.2969 814.661 55.1875 814.516C55.0417 814.37 54.8411 814.297 54.5859 814.297H47.0391C46.8932 814.297 46.7656 814.242 46.6562 814.133C46.5469 814.023 46.4922 813.896 46.4922 813.75C46.4922 813.568 46.5469 813.422 46.6562 813.312C46.7656 813.203 46.8932 813.148 47.0391 813.148H54.5859C55.1693 813.148 55.6432 813.331 56.0078 813.695C56.3724 814.023 56.5547 814.497 56.5547 815.117C56.5547 815.664 56.3724 816.12 56.0078 816.484C55.6068 816.849 55.0964 817.031 54.4766 817.031H47.3125V819.383C47.3125 819.529 47.2578 819.674 47.1484 819.82C47.0391 819.93 46.9115 819.984 46.7656 819.984Z" fill="#E8E8E8"/>
<defs>
<filter id="filter0_d_6_14" x="0.426758" y="83" width="31.1465" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.239216 0 0 0 0 0.803922 0 0 0 0 0.345098 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6_14"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6_14" result="shape"/>
</filter>
</defs>
</svg>
Any one has any Idea. Is there any way to achieve it?
I'm using this library that allows me to use svg files directly in my react-native:
[react-native-svg-transformer][1]
But it isn't working correctly. It renders my svg, but the colors are all wrong.
My <View>'s bg-color is affecting my svg color.
like:
My original svg should look like this:
I downloaded some other svg files, they work just fine!
Here is my svg file:
<svg width="383" height="443" viewBox="0 0 383 443" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<g filter="url(#filter0_d)">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="0" width="375" height="435">
<path d="M4 0H379V435H4V0Z" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask0)">
<path d="M379 0H4V276H379V0Z" fill="url(#paint0_linear)"/>
<path d="M379 241H4V812H379V241Z" fill="url(#paint1_linear)"/>
<path d="M173.689 237.491C162.098 240.71 146.09 240.036 128.504 237.176V237.226C73.9305 228.318 4.25799 198.413 4.25799 198.413L4 256.42L128.637 260.232V260.162L173.689 261.54V237.491Z" fill="#18117C"/>
<path d="M4.77394 242.964C4.77394 242.964 52.8546 259.792 108.068 259.603L4 256.42L4.77394 242.964Z" fill="black"/>
<path d="M4.25781 197.565C4.25781 197.565 18.4444 223.43 128.636 237.397C128.636 237.397 43.617 217.947 4.25781 197.565Z" fill="#2D25CE"/>
<path d="M226.721 257.182L225.824 237.868C212.722 247.317 198.71 257.795 198.71 257.795L226.721 257.182" fill="#0D0D63"/>
<path d="M226.794 257.256L379.001 253.501C379.001 253.501 350.348 200.194 299.348 239.554C299.348 239.554 251.785 217.953 239.751 227.049C236.075 229.827 231.114 233.785 225.998 237.942" fill="#0D0D63"/>
<path d="M252.493 280.208C186.435 189.537 130.192 237.74 106.041 267.792L106.062 268.437C98.229 278.189 93.9131 285.839 93.9131 285.839L106.604 285.384L106.607 285.501L252.493 280.208Z" fill="#2D25CE"/>
<path d="M175.037 228.282C144.438 226.725 120.143 249.844 106.224 267.402L106.212 267.621C98.2847 277.761 93.9131 285.839 93.9131 285.839C98.241 280.799 102.468 276.18 106.595 271.982L106.595 271.95C146.16 231.807 175.037 228.282 175.037 228.282Z" fill="#86B4E2"/>
<path d="M-38.8105 177.76C-38.8105 177.76 -26.6194 154.891 -1.4243 160.153C-1.4243 160.153 12.7973 137.839 36.5708 147.298C36.5708 147.298 57.9046 147.247 63.1882 163.69C63.1882 163.69 83.9139 161.028 83.1012 183.567L-38.8105 177.76Z" fill="#1C31AF"/>
<path d="M342.311 50.5249C336.394 34.0822 312.506 34.1324 312.506 34.1324C297.704 28.8727 286.209 33.4367 278.92 38.5258C273.1 42.5891 269.962 46.9873 269.962 46.9873C241.75 41.7252 228.099 64.5945 228.099 64.5945L278.921 66.7564L364.608 70.4016C365.518 47.8624 342.311 50.5249 342.311 50.5249Z" fill="#232FC9"/>
<path d="M116.3 80.4658C111.65 80.4661 107.102 79.1461 103.215 76.6683C99.3285 74.1905 96.2727 70.663 94.424 66.5201C92.5754 62.3773 92.0145 57.7999 92.8106 53.3515C93.6066 48.903 95.7248 44.7777 98.9043 41.4834C95.0094 41.6828 91.2243 42.8072 87.881 44.7579C84.5377 46.7086 81.7382 49.426 79.7282 52.672C77.7181 55.9179 76.5588 59.5932 76.3519 63.3755C76.145 67.1579 76.8969 70.9317 78.5416 74.3662C80.1862 77.8006 82.6735 80.7908 85.7852 83.0745C88.8969 85.3581 92.5381 86.8655 96.3893 87.4645C100.241 88.0634 104.184 87.7356 107.875 86.5099C111.565 85.2841 114.89 83.1978 117.557 80.4338C117.14 80.4548 116.721 80.4655 116.3 80.4658Z" fill="url(#paint2_radial)"/>
</g>
</g>
<g filter="url(#filter1_d)">
<path d="M323.813 257.195C323.813 257.195 338.745 258.168 343.278 257.195C347.81 256.222 355.543 255.249 355.543 255.249L354.21 261.41C354.21 261.41 344.789 259.897 337.412 261.41C330.035 262.923 323.013 260.005 323.813 257.195Z" fill="#06236D"/>
</g>
<g filter="url(#filter2_d)">
<path d="M343.277 255.249V222.177L355.543 255.249H343.277Z" fill="#006466"/>
</g>
<g filter="url(#filter3_d)">
<path d="M323.813 257.195C323.813 257.195 317.769 253.088 355.543 255.249C355.543 255.249 344.803 256.97 343.277 257.195C343.277 257.195 330.39 258.276 323.813 257.195Z" fill="#66A1F7"/>
</g>
<g filter="url(#filter4_d)">
<path d="M324.613 250.17H342.833L336.256 195.914L324.613 250.17Z" fill="#006466"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="383" height="443" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="319.751" y="255.249" width="39.7918" height="14.5742" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter2_d" x="339.277" y="222.177" width="20.2652" height="41.0721" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter3_d" x="319.458" y="254.621" width="40.0845" height="11.0543" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter4_d" x="320.613" y="195.914" width="26.22" height="62.2553" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="192.508" y1="234.923" x2="189.528" y2="41.319" gradientUnits="userSpaceOnUse">
<stop stop-color="#0E225E"/>
<stop offset="1"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="192.442" y1="744.571" x2="189.561" y2="292.348" gradientUnits="userSpaceOnUse">
<stop stop-color="#021038"/>
<stop offset="0.2013" stop-color="#03123C"/>
<stop offset="0.4025" stop-color="#061A48"/>
<stop offset="0.6038" stop-color="#0B265C"/>
<stop offset="0.804" stop-color="#123778"/>
<stop offset="1" stop-color="#1B4C9B"/>
</linearGradient>
<radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(96.9385 64.6196) scale(22.2791 21.6354)">
<stop stop-color="#CEB9A5"/>
<stop offset="0.2559" stop-color="#D2C1B1"/>
<stop offset="0.7119" stop-color="#DED6CF"/>
<stop offset="1" stop-color="#E6E6E6"/>
</radialGradient>
</defs>
</svg>
Any Suggestion is appreciated <3
You may try reordering your svg placing the defs at the top and placing the mask inside the defs, just like this:
<svg width="383" height="443" viewBox="0 0 383 443" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<defs>
<filter id="filterd" x="0" y="0" width="383" height="443" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="319.751" y="255.249" width="39.7918" height="14.5742" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter2_d" x="339.277" y="222.177" width="20.2652" height="41.0721" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter3_d" x="319.458" y="254.621" width="40.0845" height="11.0543" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter4_d" x="320.613" y="195.914" width="26.22" height="62.2553" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="192.508" y1="234.923" x2="189.528" y2="41.319" gradientUnits="userSpaceOnUse">
<stop stop-color="#0E225E"/>
<stop offset="1"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="192.442" y1="744.571" x2="189.561" y2="292.348" gradientUnits="userSpaceOnUse">
<stop stop-color="#021038"/>
<stop offset="0.2013" stop-color="#03123C"/>
<stop offset="0.4025" stop-color="#061A48"/>
<stop offset="0.6038" stop-color="#0B265C"/>
<stop offset="0.804" stop-color="#123778"/>
<stop offset="1" stop-color="#1B4C9B"/>
</linearGradient>
<radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(96.9385 64.6196) scale(22.2791 21.6354)">
<stop stop-color="#CEB9A5"/>
<stop offset="0.2559" stop-color="#D2C1B1"/>
<stop offset="0.7119" stop-color="#DED6CF"/>
<stop offset="1" stop-color="#E6E6E6"/>
</radialGradient>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="0" width="375" height="435">
<path d="M4 0H379V435H4V0Z" fill="#C4C4C4"/>
</mask>
</defs>
<g filter="url(#filterd)">
<g mask="url(#mask0)">
<path d="M379 0H4V276H379V0Z" fill="url(#paint0_linear)"/>
<path d="M379 241H4V812H379V241Z" fill="url(#paint1_linear)"/>
<path d="M173.689 237.491C162.098 240.71 146.09 240.036 128.504 237.176V237.226C73.9305 228.318 4.25799 198.413 4.25799 198.413L4 256.42L128.637 260.232V260.162L173.689 261.54V237.491Z" fill="#18117C"/>
<path d="M4.77394 242.964C4.77394 242.964 52.8546 259.792 108.068 259.603L4 256.42L4.77394 242.964Z" fill="black"/>
<path d="M4.25781 197.565C4.25781 197.565 18.4444 223.43 128.636 237.397C128.636 237.397 43.617 217.947 4.25781 197.565Z" fill="#2D25CE"/>
<path d="M226.721 257.182L225.824 237.868C212.722 247.317 198.71 257.795 198.71 257.795L226.721 257.182" fill="#0D0D63"/>
<path d="M226.794 257.256L379.001 253.501C379.001 253.501 350.348 200.194 299.348 239.554C299.348 239.554 251.785 217.953 239.751 227.049C236.075 229.827 231.114 233.785 225.998 237.942" fill="#0D0D63"/>
<path d="M252.493 280.208C186.435 189.537 130.192 237.74 106.041 267.792L106.062 268.437C98.229 278.189 93.9131 285.839 93.9131 285.839L106.604 285.384L106.607 285.501L252.493 280.208Z" fill="#2D25CE"/>
<path d="M175.037 228.282C144.438 226.725 120.143 249.844 106.224 267.402L106.212 267.621C98.2847 277.761 93.9131 285.839 93.9131 285.839C98.241 280.799 102.468 276.18 106.595 271.982L106.595 271.95C146.16 231.807 175.037 228.282 175.037 228.282Z" fill="#86B4E2"/>
<path d="M-38.8105 177.76C-38.8105 177.76 -26.6194 154.891 -1.4243 160.153C-1.4243 160.153 12.7973 137.839 36.5708 147.298C36.5708 147.298 57.9046 147.247 63.1882 163.69C63.1882 163.69 83.9139 161.028 83.1012 183.567L-38.8105 177.76Z" fill="#1C31AF"/>
<path d="M342.311 50.5249C336.394 34.0822 312.506 34.1324 312.506 34.1324C297.704 28.8727 286.209 33.4367 278.92 38.5258C273.1 42.5891 269.962 46.9873 269.962 46.9873C241.75 41.7252 228.099 64.5945 228.099 64.5945L278.921 66.7564L364.608 70.4016C365.518 47.8624 342.311 50.5249 342.311 50.5249Z" fill="#232FC9"/>
<path d="M116.3 80.4658C111.65 80.4661 107.102 79.1461 103.215 76.6683C99.3285 74.1905 96.2727 70.663 94.424 66.5201C92.5754 62.3773 92.0145 57.7999 92.8106 53.3515C93.6066 48.903 95.7248 44.7777 98.9043 41.4834C95.0094 41.6828 91.2243 42.8072 87.881 44.7579C84.5377 46.7086 81.7382 49.426 79.7282 52.672C77.7181 55.9179 76.5588 59.5932 76.3519 63.3755C76.145 67.1579 76.8969 70.9317 78.5416 74.3662C80.1862 77.8006 82.6735 80.7908 85.7852 83.0745C88.8969 85.3581 92.5381 86.8655 96.3893 87.4645C100.241 88.0634 104.184 87.7356 107.875 86.5099C111.565 85.2841 114.89 83.1978 117.557 80.4338C117.14 80.4548 116.721 80.4655 116.3 80.4658Z" fill="url(#paint2_radial)"/>
</g>
</g>
<g filter="url(#filter1_d)">
<path d="M323.813 257.195C323.813 257.195 338.745 258.168 343.278 257.195C347.81 256.222 355.543 255.249 355.543 255.249L354.21 261.41C354.21 261.41 344.789 259.897 337.412 261.41C330.035 262.923 323.013 260.005 323.813 257.195Z" fill="#06236D"/>
</g>
<g filter="url(#filter2_d)">
<path d="M343.277 255.249V222.177L355.543 255.249H343.277Z" fill="#006466"/>
</g>
<g filter="url(#filter3_d)">
<path d="M323.813 257.195C323.813 257.195 317.769 253.088 355.543 255.249C355.543 255.249 344.803 256.97 343.277 257.195C343.277 257.195 330.39 258.276 323.813 257.195Z" fill="#66A1F7"/>
</g>
<g filter="url(#filter4_d)">
<path d="M324.613 250.17H342.833L336.256 195.914L324.613 250.17Z" fill="#006466"/>
</g>
</svg>
Maybe the whole stuff comes as a problem with the actual placement of the mask tag. Browser display it correctly but maybe the pluging you are using just get confused by this weird placement and as a result it behaves weird too.
I am working with the D3 library.
I want to export svg as a png image , check below code what is shown in this jsfiddle, when we are exporting svg as a png, pattern background image not exporting in png image. kindely check and revert.
I read that something like this can be accomplished using svg's patterns. So here is some of the D3 code I am using to append an image into a pattern:
d3.select("#downloadsvg").on("click", function(){
var html = d3.select("#svg > .pattern > svg")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.node().parentNode.innerHTML;
//console.log(html);
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
var img = '<img src="'+imgsrc+'">';
d3.select("#svgdataurl").html(img);
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d");
var image = new Image;
image.src = imgsrc;
image.onload = function() {
context.drawImage(image, 0, 0);
var canvasdata = canvas.toDataURL("image/png");
var pngimg = '<img src="'+canvasdata+'">';
d3.select("#pngdataurl").html(pngimg);
var a = document.createElement("a");
a.download = "sample.png";
a.href = canvasdata;
a.click();
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="svg">
<div class="pattern" style="margin: 25px;"><svg id="selectedsvg" width="250" height="250" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="contrast">
<feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 .5 1 1"></feFuncR>
<feFuncG type="discrete" tableValues="0 .5 1"></feFuncG>
<feFuncB type="discrete" tableValues="0"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="brightness">
<feComponentTransfer>
<feFuncR type="linear" slope="5"></feFuncR>
<feFuncG type="linear" slope="5"></feFuncG>
<feFuncB type="linear" slope="5"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="grayscale">
<feColorMatrix values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"></feColorMatrix>
</filter>
<filter id="saturate">
<feComponentTransfer>
<feFuncR tableValues="1 .33 .33" type="table"></feFuncR>
<feFuncG tableValues=".33 1 .33" type="table"></feFuncG>
<feFuncB tableValues=".33 .33 1" type="table"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="hue-rotate">
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"></feFuncR>
<feFuncG type="table" tableValues="1 0"></feFuncG>
<feFuncB type="table" tableValues="1 0"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="sepia">
<feComponentTransfer>
<feFuncR tableValues="0.15 .25" type="table"></feFuncR>
<feFuncG tableValues=".01 .25" type="table"></feFuncG>
<feFuncB tableValues="0 .09" type="table"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="invert">
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"></feFuncR>
<feFuncG type="table" tableValues="1 0"></feFuncG>
<feFuncB type="table" tableValues="1 0"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="blur">
<feGaussianBlur stdDeviation="10" result="outBlur"></feGaussianBlur>
</filter>
<pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image height="1px" width="1px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/demo3/img/Embroidery1.png"></image></pattern>
<pattern id="pattern2" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image height="1px" width="1px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/demo3/img/Embroidery2.png"></image></pattern>
<pattern id="pattern3" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image height="1px" width="1px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/demo3/img/Embroidery3.png"></image></pattern>
<pattern id="pattern4" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image height="1px" width="1px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/demo3/img/Embroidery4.png"></image></pattern>
</defs>
<rect x="0%" y="0%" width="100%" height="100%" fill="#FC7A04" id="1" filter="url(#blur)"></rect>
<circle xmlns="http://www.w3.org/2000/svg" cx="50%" cy="50%" r="50%" stroke="black" stroke-width="0.5" id="c1" fill="url(#pattern-77)"></circle>
<circle xmlns="http://www.w3.org/2000/svg" cx="50%" cy="50%" r="40%" stroke="black" stroke-width="0.5" fill="#eee333" id="c2" filter="url(#blur)"></circle>
<circle xmlns="http://www.w3.org/2000/svg" cx="50%" cy="50%" r="30%" stroke="black" stroke-width="0.5" id="c3" fill="url(#pattern-94)"></circle>
<circle xmlns="http://www.w3.org/2000/svg" cx="50%" cy="50%" r="20%" stroke="black" stroke-width="0.5" id="c4"></circle>
<defs><pattern id="pattern-94" height="30%" width="30%" x="-0.05" y="-0.030000000000000006" patternContentUnits="objectBoundingBox"><image width="0.30000000000000004px" height="0.30000000000000004px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/media/configurator/embroidery/Embroidery4.png"></image></pattern></defs><defs><pattern id="pattern-77" height="20%" width="20%" x="-0.02" y="0.01" patternContentUnits="objectBoundingBox"><image width="0.20000000000000004px" height="0.20000000000000004px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/media/configurator/embroidery/Embroidery1.png"></image></pattern></defs><text x="8" y="238" id="text-21" font-size="27" font-family="Times New Roman" style="fill: rgb(184, 19, 59);" font-weight="bold" font-style="italic">sadja</text><path d="M9.5,15L118.5,97" stroke="black" stroke-width="1px"></path><path d="M119.5,98L216.5,9" stroke="black" stroke-width="1px"></path><path d="M217.5,10L217.5,10" stroke="black" stroke-width="1px"></path><path d="M217.5,10L9.5,15" stroke="black" stroke-width="1px"></path><path d="M10.5,16L10.5,16" stroke="black" stroke-width="1px"></path><path d="M11.5,35L11.5,35" stroke="black" stroke-width="1px"></path><path d="M11.5,35L11.5,35" stroke="black" stroke-width="1px"></path><path d="M206.5,143L206.5,143" stroke="black" stroke-width="1px"></path><path d="M206.5,143L206.5,143" stroke="black" stroke-width="1px"></path><path d="M163.5,32L163.5,32" stroke="black" stroke-width="1px"></path></svg> </div>
</div>
<canvas id="canvas1" width='380' height='378' hidden></canvas>
<button id="downloadsvg"> Save Svg</button>
First you have to embed your image into base64 using dataurl. after you can able to download the png with background
I have the following SVG filter:
<svg style="visibility: hidden; height: 0; width: 0;">
<filter id="rgbShift">
<feOffset in="SourceGraphic" dx="1" dy="-1" result="text1" />
<feFlood flood-color="#FF0000" result="redColor" />
<feComposite in="redColor" in2="text1" operator="arithmetic" k1="1" result="red" />
<feOffset in="SourceGraphic" dx="-1" dy="2" result="text2" />
<feFlood flood-color="#00FF00" result="greenColor" />
<feComposite in="greenColor" in2="text2" operator="arithmetic" k1="1" result="green" />
<feOffset in="SourceGraphic" dx="-2" dy="1" result="text3" />
<feFlood flood-color="#0000FF" result="blueColor" />
<feComposite in="blueColor" in2="text3" operator="arithmetic" k1="1" result="blue" />
<feComposite in="red" in2="green" operator="lighter" result="rb" />
<feComposite in="rb" in2="blue" operator="lighter" />
</filter>
</svg>
This filter is applied to my menu screen in a game I am working on. I want to apply the same filter to the game itself, but it runs very slowly, probably because elements are almost constantly moving on the page. Is there a way to make my filter run faster?
While I have no formal results, testing it on a single jpg picture in Inkscape gives me the impression that the following filter is perceptably faster, while being mathematically identical AFAIK:
<filter id="rgbShift">
<feOffset in="SourceGraphic" dx="1" dy="-1" />
<feComponentTransfer result="red">
<feFuncG type="discrete" tableValues="0" />
<feFuncB type="discrete" tableValues="0" />
</feComponentTransfer>
<feOffset in="SourceGraphic" dx="-1" dy="2" />
<feComponentTransfer result="green">
<feFuncR type="discrete" tableValues="0" />
<feFuncB type="discrete" tableValues="0" />
</feComponentTransfer>
<feOffset in="SourceGraphic" dx="-2" dy="1" />
<feComponentTransfer result="blue">
<feFuncR type="discrete" tableValues="0" />
<feFuncG type="discrete" tableValues="0" />
</feComponentTransfer>
<feComposite in="red" in2="green" operator="arithmetic" k2="1" k3="1" result="rb" />
<feComposite in="rb" in2="blue" operator="arithmetic" k2="1" k3="1" />
</filter>
Whether that is enough, I don't know. The following measures might help avoiding time-critical operations (i. e. recomputing the filter for every frame):
Do not apply the filter to animated elements.
Do not apply the filter to elements so that their filter effects region (the bounding box of the filtered element plus, as default, 10% in every direction) overlaps the bounding box of animated elements. Whether they are above or below does not matter.
I do not know if it's the cause of your performance problems, but feComposite is a slow operation and you have many mistakes in your syntax.
In SVG 1.1 feComposite has no "lighter" operator. That was added in the Filters 1.0 spec and is not supported cross-browser yet. You may want to go with feComposite operator="arithmetic" k2="1" k3="1" which I believe is equivalent.
It's usually a better idea to use feBlend/multiply than feComposite/arithmetic, it seems to be much faster.
A corrected implementation of what I think you wanted with your original filter would be as follows:
<filter id="rgbShift">
<feOffset in="SourceGraphic" dx="1" dy="-1" result="text1" />
<feFlood flood-color="#FF0000" result="redColor" />
<feBlend in="text1" in2="redColor" mode="multiply" result="red"/>
<feOffset in="SourceGraphic" dx="-1" dy="2" result="text2" />
<feFlood flood-color="#00FF00" result="greenColor" />
<feBlend in="text2" in2="greenColor" mode="multiply" result="green"/>
<feOffset in="SourceGraphic" dx="-2" dy="1" result="text3" />
<feFlood flood-color="#0000FF" result="blueColor" />
<feBlend in="text3" in2="blueColor" mode="multiply" result="blue"/>
<feComposite in="red" in2="green" operator="arithmetic" k2="1" k3="1" result="rb" />
<feComposite in="rb" in2="blue" operator="arithmetic" k2="1" k3="1"/>
</filter>