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?
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>
I'm rendering a list of icons to which i need to set dynamic text, but it seems like the first items' prop overrides all other.
Desiered result:
Actual result:
Inspecting with Vue Devtools confirm that the correct props are passed to each image component.
Code:
<div>
<my-component v-for="item in items" :key="item.id" :label="item.number" />
</div>
My-component (only <tspan> tag and x attribute are modified):
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="102"
height="102"
viewBox="0 0 102 102"
>
<defs>
<filter
id="7ojrpldaib"
width="117.9%"
height="127.7%"
x="-8.9%"
y="-13.9%"
filterUnits="objectBoundingBox"
>
<feOffset in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur
in="shadowOffsetOuter1"
result="shadowBlurOuter1"
stdDeviation="5"
/>
<feColorMatrix
in="shadowBlurOuter1"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.146811319 0"
/>
</filter>
<filter
id="s9h21tx5rd"
width="125.6%"
height="195.5%"
x="-12.8%"
y="-47.7%"
filterUnits="objectBoundingBox"
>
<feOffset in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur
in="shadowOffsetOuter1"
result="shadowBlurOuter1"
stdDeviation="3.5"
/>
<feColorMatrix
in="shadowBlurOuter1"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.199621667 0"
/>
</filter>
<filter
id="b7jpw6g3cf"
width="163.2%"
height="158.5%"
x="-31.6%"
y="-29.3%"
filterUnits="objectBoundingBox"
>
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur
in="shadowOffsetOuter1"
result="shadowBlurOuter1"
stdDeviation="2"
/>
<feColorMatrix
in="shadowBlurOuter1"
result="shadowMatrixOuter1"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.148289821 0"
/>
<feMerge>
<feMergeNode in="shadowMatrixOuter1" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<text
id="kj63480c6e"
fill="#FFF"
font-family="AvenirNext-Bold, Avenir Next"
font-size="16"
font-weight="bold"
>
{{ label }}
<tspan :x="`${x}`" y="77">
{{ label }}
</tspan>
</text>
<path
id="6cjz1d52ca"
d="M53.5 3.175l30.57 17.65c3.403 1.965 5.5 5.596 5.5 9.526v35.298c0 3.93-2.097 7.561-5.5 9.526L53.5 92.825c-3.403 1.965-7.597 1.965-11 0l-30.57-17.65c-3.403-1.965-5.5-5.596-5.5-9.526V30.351c0-3.93 2.097-7.561 5.5-9.526L42.5 3.175c3.403-1.965 7.597-1.965 11 0z"
/>
</defs>
<g fill="none" fill-rule="evenodd">
<g>
<g transform="translate(3 3)">
<mask id="3k9a2vzgqc" fill="#fff">
<use xlink:href="#6cjz1d52ca" />
</mask>
<use
fill="#000"
filter="url(#7ojrpldaib)"
transform="matrix(1 0 0 -1 0 96)"
xlink:href="#6cjz1d52ca"
/>
<g mask="url(#3k9a2vzgqc)">
<g fill-rule="nonzero">
<path
fill="#E46A32"
d="M0 0.238H188V94.238H0z"
transform="translate(-47 .762)"
/>
<g>
<path
fill="#E76F39"
d="M57.141 82.931c-12.85-2.561-26.266-3.783-39.423-2.279-6.02.67-11.957 1.95-17.718 3.924V94h99.21c-13.628-3.901-27.137-8.002-40.87-10.834-.4-.082-.8-.152-1.199-.234z"
transform="translate(-47 .762) translate(0 .238)"
/>
<path
fill="#EB743F"
d="M188.119 0H0v84.576c5.761-1.973 11.699-3.266 17.718-3.936 13.157-1.492 26.572-.282 39.423 2.28.4.082.8.164 1.2.235 13.732 2.82 27.241 6.932 40.868 10.833h88.91V0z"
transform="translate(-47 .762) translate(0 .238)"
/>
<path
fill="#EE7A46"
d="M56.248 68.267c.376.095.752.2 1.116.294 23.069 6.169 45.702 15.686 69.78 20.75 20.482 4.301 41.093 3.432 60.975-1.198V0H0v67.55c6.15-2.067 12.522-3.254 18.941-3.63 12.616-.776 25.232 1.198 37.307 4.347z"
transform="translate(-47 .762) translate(0 .238)"
/>
<path
fill="#F27F4C"
d="M0 0v50.455c6.537-2.163 13.345-3.208 20.152-3.255 12.087-.094 23.891 2.667 35.19 6.403.353.118.694.236 1.047.353 21.586 7.285 42.997 17.167 66.123 22.572 21.951 5.134 44.244 4.042 65.595-1.48V0H0z"
transform="translate(-47 .762) translate(0 .238)"
/>
<path
fill="#F58453"
d="M21.375 30.48c11.546.704 22.563 4.135 33.074 8.471.329.13.646.27.976.4 20.105 8.413 40.292 18.623 62.467 24.404 23.373 6.087 47.43 4.794 70.227-1.739V0H0v33.276c6.937-2.303 14.18-3.231 21.375-2.797z"
transform="translate(-47 .762) translate(0 .238)"
/>
<path
fill="#F79058"
d="M188.119 0H0v16.015c7.325-2.456 15.014-3.231 22.598-2.256 11.005 1.422 21.222 5.605 30.957 10.528.306.153.6.306.905.459 18.624 9.529 37.589 20.08 58.823 26.226 24.75 7.167 50.65 5.757 74.848-1.951V0h-.012z"
transform="translate(-47 .762) translate(0 .238)"
/>
<path
fill="#F89B5E"
d="M53.485 10.14c17.142 10.657 34.884 21.503 55.165 28.047 24.526 7.92 50.71 7.145 75.001-.622 1.505-.482 2.986-.987 4.48-1.516V0H33.873c6.584 2.503 12.78 5.946 18.777 9.635.282.165.552.34.835.505z"
transform="translate(-47 .762) translate(0 .238)"
/>
<path
fill="#F9A663"
d="M188.119 0H58.552c13.886 10.082 28.63 19.329 45.478 25.404 22.55 8.13 47.03 8.777 69.956 2.479 4.797-1.316 9.536-2.961 14.145-4.9V0h-.012z"
transform="translate(-47 .762) translate(0 .238)"
/>
<path
fill="#FAB168"
d="M164.31 18.189c5.55-1.245 11.005-2.973 16.296-5.146 2.551-1.046 5.056-2.21 7.513-3.467V0H75.647c7.396 4.9 15.25 9.188 23.762 12.62 20.564 8.307 43.35 10.422 64.901 5.569z"
transform="translate(-47 .762) translate(0 .238)"
/>
<path
fill="#FBBC6E"
d="M154.645 8.507c8.854-1.48 17.507-4.36 25.49-8.507H95.13c18.542 8.342 39.458 11.867 59.516 8.507z"
transform="translate(-47 .762) translate(0 .238)"
/>
</g>
</g>
</g>
</g>
<g fill="#FFF">
<use filter="url(#s9h21tx5rd)" xlink:href="#kj63480c6e" />
<use xlink:href="#kj63480c6e" />
</g>
<g
fill-rule="nonzero"
filter="url(#b7jpw6g3cf)"
transform="translate(33 13)"
>
<path
fill="#4E6276"
d="M11.396 35.532L0.039 35.532 0.039 14.269 11.957 14.269"
/>
<path
fill="#2E485D"
d="M11.396 35.532L0.039 35.532 0.039 31.614 11.957 31.614"
/>
<path
fill="#FFD0A6"
d="M36.263 25.497c.609-.609.985-1.45.985-2.379s-.376-1.77-.985-2.379c-.465-.464-1.065-.793-1.736-.923h-1.67c1.856 0 3.36-1.507 3.36-3.363 0-.928-.375-1.769-.985-2.378-.61-.61-1.45-.986-2.378-.986l-12.28-.026c1.777-2.097 3.09-5.596 3.826-8.164.584-2.04-.595-4.165-2.635-4.75-2.04-.583-4.166.596-4.749 2.635-.13.454-.383.956-.693 1.457-.27.436-.583.872-.899 1.278-.827 1.063-1.82 1.984-2.913 2.77-1.755 1.26-4.979 4.213-4.861 8.837v10.02C7.65 35.36 16.057 40 23.29 40h8.208c.928 0 1.77-.377 2.379-.984.608-.61.985-1.452.985-2.38 0-1.858-1.507-3.363-3.364-3.363l1.374-.063c.929 0 1.77-.376 2.379-.986.609-.608.985-1.45.985-2.378 0-.928-.376-1.77-.985-2.379-.61-.608-1.45-.984-2.38-.984h1.013c.929 0 1.77-.377 2.379-.986z"
/>
<g>
<path
fill="#F5C8A1"
d="M25.67 28.123h-8.208c-7.234 0-15.64-4.64-15.64-12.853V5.249C1.768 3.165 2.395 1.42 3.26.017 1.663 1.602-.015 4.08.07 7.437v10.02c0 8.214 8.408 12.854 15.641 12.854h8.207c.928 0 1.771-.376 2.38-.984.424-.425.734-.963.885-1.564-.455.23-.97.36-1.514.36z"
transform="translate(7.578 9.688)"
/>
<path
fill="#E8B182"
d="M28.224 8.386c-.571 1.038-1.677 1.742-2.946 1.743h-.538c-.482 0-.872-.39-.872-.87 0-.241.097-.459.255-.618.159-.157.376-.255.617-.255h3.484zM29.252 15.052c-.571 1.038-1.677 1.741-2.946 1.742h-1.763c-.481 0-.872-.389-.872-.87 0-.24.098-.458.255-.617.16-.158.377-.255.617-.255h4.71zM28.24 21.779c-.572 1.038-1.677 1.742-2.946 1.743H23.53c-.481 0-.872-.39-.872-.87 0-.241.098-.459.255-.618.16-.157.376-.255.617-.255h4.71z"
transform="translate(7.578 9.688)"
/>
</g>
<path
fill="#FFBF3E"
d="M5.917 18.716c0 .811-.658 1.47-1.47 1.47-.811 0-1.47-.659-1.47-1.47 0-.812.659-1.47 1.47-1.47.812 0 1.47.658 1.47 1.47z"
/>
</g>
</g>
</g>
</svg>
</template>
<script>
export default {
props: {
label: String
},
computed: {
x() {
switch (this.label.length) {
case 1:
return 46
case 2:
return 42
case 3:
return 40
case 4:
return 36
default:
return 46
}
}
}
}
</script>
I am generating random id's from the labels that is working fine.
It was not working because you have same ids for all the <text>
change the code like as follows
<g fill="#FFF">
<use filter="url(#s9h21tx5rd)" :xlink:href="`#kj63480c6e${label}`" />
<use :xlink:href="`#kj63480c6e${label}`" />
</g>
<text :id="`kj63480c6e${label}`" fill="#FFF" font-family="AvenirNext-Bold, Avenir Next" font-size="16" font-weight="bold">
{{ label }}
<tspan :x="`${x}`" y="77">
{{label}}
</tspan>
</text>
Here is the complete code if you want to copy
Complete Code for my-component is as follows which is also you can directly copy
<template>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="102" height="102"
viewBox="0 0 102 102">
<defs>
<filter id="7ojrpldaib" width="117.9%" height="127.7%" x="-8.9%" y="-13.9%" filterUnits="objectBoundingBox">
<feOffset in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="5" />
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.146811319 0" />
</filter>
<filter id="s9h21tx5rd" width="125.6%" height="195.5%" x="-12.8%" y="-47.7%"
filterUnits="objectBoundingBox">
<feOffset in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="3.5" />
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.199621667 0" />
</filter>
<filter id="b7jpw6g3cf" width="163.2%" height="158.5%" x="-31.6%" y="-29.3%"
filterUnits="objectBoundingBox">
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2" />
<feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.148289821 0" />
<feMerge>
<feMergeNode in="shadowMatrixOuter1" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<text :id="`kj63480c6e${label}`" fill="#FFF" font-family="AvenirNext-Bold, Avenir Next" font-size="16"
font-weight="bold">
{{ label }}
<tspan :x="`${x}`" y="77">
{{label}}
</tspan>
</text>
<path id="6cjz1d52ca"
d="M53.5 3.175l30.57 17.65c3.403 1.965 5.5 5.596 5.5 9.526v35.298c0 3.93-2.097 7.561-5.5 9.526L53.5 92.825c-3.403 1.965-7.597 1.965-11 0l-30.57-17.65c-3.403-1.965-5.5-5.596-5.5-9.526V30.351c0-3.93 2.097-7.561 5.5-9.526L42.5 3.175c3.403-1.965 7.597-1.965 11 0z" />
</defs>
<g fill="none" fill-rule="evenodd">
<g>
<g transform="translate(3 3)">
<mask id="3k9a2vzgqc" fill="#fff">
<use xlink:href="#6cjz1d52ca" />
</mask>
<use fill="#000" filter="url(#7ojrpldaib)" transform="matrix(1 0 0 -1 0 96)"
xlink:href="#6cjz1d52ca" />
<g mask="url(#3k9a2vzgqc)">
<g fill-rule="nonzero">
<path fill="#E46A32" d="M0 0.238H188V94.238H0z" transform="translate(-47 .762)" />
<g>
<path fill="#E76F39"
d="M57.141 82.931c-12.85-2.561-26.266-3.783-39.423-2.279-6.02.67-11.957 1.95-17.718 3.924V94h99.21c-13.628-3.901-27.137-8.002-40.87-10.834-.4-.082-.8-.152-1.199-.234z"
transform="translate(-47 .762) translate(0 .238)" />
<path fill="#EB743F"
d="M188.119 0H0v84.576c5.761-1.973 11.699-3.266 17.718-3.936 13.157-1.492 26.572-.282 39.423 2.28.4.082.8.164 1.2.235 13.732 2.82 27.241 6.932 40.868 10.833h88.91V0z"
transform="translate(-47 .762) translate(0 .238)" />
<path fill="#EE7A46"
d="M56.248 68.267c.376.095.752.2 1.116.294 23.069 6.169 45.702 15.686 69.78 20.75 20.482 4.301 41.093 3.432 60.975-1.198V0H0v67.55c6.15-2.067 12.522-3.254 18.941-3.63 12.616-.776 25.232 1.198 37.307 4.347z"
transform="translate(-47 .762) translate(0 .238)" />
<path fill="#F27F4C"
d="M0 0v50.455c6.537-2.163 13.345-3.208 20.152-3.255 12.087-.094 23.891 2.667 35.19 6.403.353.118.694.236 1.047.353 21.586 7.285 42.997 17.167 66.123 22.572 21.951 5.134 44.244 4.042 65.595-1.48V0H0z"
transform="translate(-47 .762) translate(0 .238)" />
<path fill="#F58453"
d="M21.375 30.48c11.546.704 22.563 4.135 33.074 8.471.329.13.646.27.976.4 20.105 8.413 40.292 18.623 62.467 24.404 23.373 6.087 47.43 4.794 70.227-1.739V0H0v33.276c6.937-2.303 14.18-3.231 21.375-2.797z"
transform="translate(-47 .762) translate(0 .238)" />
<path fill="#F79058"
d="M188.119 0H0v16.015c7.325-2.456 15.014-3.231 22.598-2.256 11.005 1.422 21.222 5.605 30.957 10.528.306.153.6.306.905.459 18.624 9.529 37.589 20.08 58.823 26.226 24.75 7.167 50.65 5.757 74.848-1.951V0h-.012z"
transform="translate(-47 .762) translate(0 .238)" />
<path fill="#F89B5E"
d="M53.485 10.14c17.142 10.657 34.884 21.503 55.165 28.047 24.526 7.92 50.71 7.145 75.001-.622 1.505-.482 2.986-.987 4.48-1.516V0H33.873c6.584 2.503 12.78 5.946 18.777 9.635.282.165.552.34.835.505z"
transform="translate(-47 .762) translate(0 .238)" />
<path fill="#F9A663"
d="M188.119 0H58.552c13.886 10.082 28.63 19.329 45.478 25.404 22.55 8.13 47.03 8.777 69.956 2.479 4.797-1.316 9.536-2.961 14.145-4.9V0h-.012z"
transform="translate(-47 .762) translate(0 .238)" />
<path fill="#FAB168"
d="M164.31 18.189c5.55-1.245 11.005-2.973 16.296-5.146 2.551-1.046 5.056-2.21 7.513-3.467V0H75.647c7.396 4.9 15.25 9.188 23.762 12.62 20.564 8.307 43.35 10.422 64.901 5.569z"
transform="translate(-47 .762) translate(0 .238)" />
<path fill="#FBBC6E"
d="M154.645 8.507c8.854-1.48 17.507-4.36 25.49-8.507H95.13c18.542 8.342 39.458 11.867 59.516 8.507z"
transform="translate(-47 .762) translate(0 .238)" />
</g>
</g>
</g>
</g>
<g fill="#FFF">
<use filter="url(#s9h21tx5rd)" :xlink:href="`#kj63480c6e${label}`" />
<use :xlink:href="`#kj63480c6e${label}`" />
</g>
<g fill-rule="nonzero" filter="url(#b7jpw6g3cf)" transform="translate(33 13)">
<path fill="#4E6276" d="M11.396 35.532L0.039 35.532 0.039 14.269 11.957 14.269" />
<path fill="#2E485D" d="M11.396 35.532L0.039 35.532 0.039 31.614 11.957 31.614" />
<path fill="#FFD0A6"
d="M36.263 25.497c.609-.609.985-1.45.985-2.379s-.376-1.77-.985-2.379c-.465-.464-1.065-.793-1.736-.923h-1.67c1.856 0 3.36-1.507 3.36-3.363 0-.928-.375-1.769-.985-2.378-.61-.61-1.45-.986-2.378-.986l-12.28-.026c1.777-2.097 3.09-5.596 3.826-8.164.584-2.04-.595-4.165-2.635-4.75-2.04-.583-4.166.596-4.749 2.635-.13.454-.383.956-.693 1.457-.27.436-.583.872-.899 1.278-.827 1.063-1.82 1.984-2.913 2.77-1.755 1.26-4.979 4.213-4.861 8.837v10.02C7.65 35.36 16.057 40 23.29 40h8.208c.928 0 1.77-.377 2.379-.984.608-.61.985-1.452.985-2.38 0-1.858-1.507-3.363-3.364-3.363l1.374-.063c.929 0 1.77-.376 2.379-.986.609-.608.985-1.45.985-2.378 0-.928-.376-1.77-.985-2.379-.61-.608-1.45-.984-2.38-.984h1.013c.929 0 1.77-.377 2.379-.986z" />
<g>
<path fill="#F5C8A1"
d="M25.67 28.123h-8.208c-7.234 0-15.64-4.64-15.64-12.853V5.249C1.768 3.165 2.395 1.42 3.26.017 1.663 1.602-.015 4.08.07 7.437v10.02c0 8.214 8.408 12.854 15.641 12.854h8.207c.928 0 1.771-.376 2.38-.984.424-.425.734-.963.885-1.564-.455.23-.97.36-1.514.36z"
transform="translate(7.578 9.688)" />
<path fill="#E8B182"
d="M28.224 8.386c-.571 1.038-1.677 1.742-2.946 1.743h-.538c-.482 0-.872-.39-.872-.87 0-.241.097-.459.255-.618.159-.157.376-.255.617-.255h3.484zM29.252 15.052c-.571 1.038-1.677 1.741-2.946 1.742h-1.763c-.481 0-.872-.389-.872-.87 0-.24.098-.458.255-.617.16-.158.377-.255.617-.255h4.71zM28.24 21.779c-.572 1.038-1.677 1.742-2.946 1.743H23.53c-.481 0-.872-.39-.872-.87 0-.241.098-.459.255-.618.16-.157.376-.255.617-.255h4.71z"
transform="translate(7.578 9.688)" />
</g>
<path fill="#FFBF3E"
d="M5.917 18.716c0 .811-.658 1.47-1.47 1.47-.811 0-1.47-.659-1.47-1.47 0-.812.659-1.47 1.47-1.47.812 0 1.47.658 1.47 1.47z" />
</g>
</g>
</g>
</svg>
</template>
<script>
export default {
props: {
label: String
},
computed: {
x() {
console.log(this.label)
switch (this.label.length) {
case 1:
return 46
case 2:
return 42
case 3:
return 40
case 4:
return 36
default:
return 46
}
}
}
}
</script>
Application URL is as follows:
Application URL
I have two SVG icons I'm importing within my react application using "react-svg-loader"
The icons are imported as components with their own paths yet the output is the same for which ever icon is first in the code.
Why is this happening and how can I fix this?
Here is my code:
import React, { Component } from 'react';
import Navigation from '../Navigation/index.js';
import MainLogo from '../MainLogo/index.js';
import Search from '../Search/index.js';
import './index.css'; // styles from
import Logo from '../../assets/svg/logos/Voo_Main.svg';
import SearchIcon from '../../assets/svg/icons/search.svg';
export default class Header extends Component {
render() {
const { navItems } = this.props;
return (
<header className="header">
<SearchIcon />
<Logo />
</header>
);
}
};
Here is the output:
Here is my loader within my webpack config:
// react-svg-loader
// https://www.npmjs.com/package/react-svg-loader
{
test: /\.svg$/,
use: [
{
loader: "babel-loader",
},
{
loader: "react-svg-loader",
options: {
jsx: true, // true outputs JSX tags
},
},
],
},
Here is the code for the SVG icons from the DOM:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a" d="M14.5 16A6.508 6.508 0 0 1 8 9.5C8 5.916 10.916 3 14.5 3S21 5.916 21 9.5 18.084 16 14.5 16m0-15C9.813 1 6 4.813 6 9.5c0 1.983.688 3.807 1.832 5.254l-6.539 6.539a.999.999 0 1 0 1.414 1.414l6.539-6.539A8.443 8.443 0 0 0 14.5 18c4.687 0 8.5-3.813 8.5-8.5C23 4.813 19.187 1 14.5 1"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
</mask>
<use fill="#D3D3D3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
<g fill="#121A28" mask="url(#b)">
<path d="M0 24h24V0H0z"></path>
</g>
</g>
</svg>
Second icon:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="50" viewBox="0 0 120 50">
<defs>
<path id="a" d="M95.448 0c-6.967 0-13.25 2.905-17.717 7.567C73.262 2.905 66.979 0 60.01 0c-6.974 0-13.263 2.912-17.73 7.578C37.81 2.912 31.523 0 24.548 0 10.992 0 0 10.989 0 24.546c0 13.557 10.992 24.548 24.548 24.548 6.975 0 13.263-2.91 17.732-7.579 4.467 4.668 10.756 7.579 17.73 7.579 6.969 0 13.252-2.908 17.72-7.568 4.469 4.66 10.751 7.568 17.718 7.568 13.56 0 24.552-10.99 24.552-24.548C120 10.989 109.008 0 95.448 0M37.533 19.734l-9.664 14.84a3.968 3.968 0 0 1-3.327 1.8 3.967 3.967 0 0 1-3.33-1.8l-9.661-14.84a3.937 3.937 0 0 1 1.17-5.462 3.971 3.971 0 0 1 5.484 1.167l6.337 9.728 6.332-9.728a3.974 3.974 0 0 1 5.485-1.167 3.94 3.94 0 0 1 1.174 5.462m22.465 15.7c-6.018 0-10.898-4.878-10.898-10.898 0-6.018 4.88-10.899 10.898-10.899 6.021 0 10.903 4.88 10.903 10.9 0 6.02-4.88 10.897-10.903 10.897m35.438 0c-6.018 0-10.898-4.878-10.898-10.898 0-6.018 4.88-10.899 10.898-10.899 6.021 0 10.902 4.88 10.902 10.9 0 6.02-4.88 10.897-10.902 10.897"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
</mask>
<use fill="#FEFEFE" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
<g fill="#D4107A" mask="url(#b)">
<path d="M0 0h120v50H0z"></path>
</g>
</g>
</svg>
If you convert the SVG to a .jsx file and modify the attributes so it's .jsx-friendly, it will render the SVGs as if it were a .svg file.
import * as React from 'react';
const svg = (
<div>
<svg
width="120"
height="50"
viewBox="0 0 120 50"
>
<defs>
<path
id="a"
d="M95.448 0c-6.967 0-13.25
2.905-17.717 7.567C73.262 2.905 66.979 0
60.01 0c-6.974 0-13.263 2.912-17.73 7.578C37.81
2.912 31.523 0 24.548 0 10.992 0 0 10.989 0 24.546c0
13.557 10.992 24.548 24.548 24.548 6.975 0 13.263-2.91
17.732-7.579 4.467 4.668 10.756 7.579 17.73 7.579 6.969
0 13.252-2.908 17.72-7.568 4.469 4.66 10.751 7.568 17.718
7.568 13.56 0 24.552-10.99 24.552-24.548C120 10.989 109.008
0 95.448 0M37.533 19.734l-9.664 14.84a3.968 3.968 0 0 1-3.327
1.8 3.967 3.967 0 0 1-3.33-1.8l-9.661-14.84a3.937 3.937 0 0 1
1.17-5.462 3.971 3.971 0 0 1 5.484 1.167l6.337
9.728 6.332-9.728a3.974 3.974 0 0 1 5.485-1.167 3.94 3.94 0
0 1 1.174 5.462m22.465 15.7c-6.018 0-10.898-4.878-10.898-10.898
0-6.018 4.88-10.899 10.898-10.899 6.021 0 10.903 4.88 10.903
10.9 0 6.02-4.88 10.897-10.903 10.897m35.438 0c-6.018
0-10.898-4.878-10.898-10.898 0-6.018 4.88-10.899 10.898-10.899
6.021 0 10.902 4.88 10.902 10.9 0 6.02-4.88 10.897-10.902 10.897"
/>
</defs>
<g fill="none" fillRule="evenodd">
<mask id="b" fill="#fff">
<use xmlns="http://www.w3.org/1999/xlink" xlinkHref="#a"/>
</mask>
<use fill="#FEFEFE"/>
<g fill="#D4107A" mask="url(#b)">
<path d="M0 0h120v50H0z"/>
</g>
</g >
</svg >
</div>
);
Excuse the blue background. That's the background color I have in my test dev environment.
Encountered the same issue - it seems that different SVGs used the same path id.
This is how I solved it - changed each SVG file to use different ID:
In your case - you should change the second SVG:
<path id="a" to <path id="b"
AND
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
to
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b"></use>
AND
<use fill="#D3D3D3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
to
<use fill="#D3D3D3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b"></use>