0👍
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:
- [Vuejs]-Error saying variable is not defined when it is clearly defined
- [Vuejs]-Why do I keep getting CORS errors even though I've configured it correctly
Source:stackexchange.com