Dynamic text prop in SVG - Vue 2

0
votes

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:

enter image description here

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>
1
javascriptvue.jssvg
Seems like you likely have duplicate id values from each image component you instantiate. You'll need to make sure each instantiation generates and uses unique ids – Robert Longson
By giving the id attribute on <text> a unique index (including all the references of that ID) I managed to get it working. Thank you! – J.L
could you please tell us what is in the items – Sourabh Somani
If you wrap the Component in shadowDOM they won't be duplicate IDs – Danny '365CSI' Engelman

1 Answers

0
votes

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