[Vuejs]-Dynamically generated SVG not using clip-path

by

0👍

I found a solution to my problem, but still curious if there are other ways to do this.

My solution was to include:

<g id="data" clip-path="url(#DelawareBounds)"></g>

Then adding content inside the #data group worked. Instead of dynamically generating that line above as well as the content that goes inside.

0👍

Generally only elements are created in a specific namespace.

Attributes are usually in the null namespace, so the correct code is.

            const dataGroup = document.createElementNS('http://www.w3.org/2000/svg','g')
            dataGroup.setAttribute('id','data')
            dataGroup.setAttribute('clip-path','url(#DelawareBounds)')

            let pathGroup
            for (let path of paths) {
                pathGroup = document.createElementNS('http://www.w3.org/2000/svg','g')                                
                pathGroup.setAttribute('style','transform: scale('+xScale+','+yScale+')')
                pathGroup.setAttribute('class','delaware-bounds-scale')
                pathGroup.appendChild(path)

                dataGroup.appendChild(pathGroup)
            }

            DelawareMask.appendChild(dataGroup)

Leave a comment