Use script tag inside SVG in React?

Question

I have some SVG-s that are equipped with scripts inside (for handling the onClick event), like:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="200" height="200">
    <defs>
        <linearGradient id="borderColor" x1="0%" y1="0%" x2="90%" y2="70%">
            <stop stop-opacity="0.8" stop-color="#def0ff" offset="0"/>
            <stop stop-opacity="0.8" stop-color="#9bb0c2" offset="0.3"/>
            <stop stop-opacity="0.8" stop-color="#def0ff" offset="0.4"/>
            <stop stop-opacity="0.8" stop-color="#9bb0c2" offset="0.6"/>
            <stop stop-opacity="0.8" stop-color="#def0ff" offset="0.7"/>
            <stop stop-opacity="0.8" stop-color="#9bb0c2" offset="1"/>
        </linearGradient>
        <linearGradient x1="0" y1="0" x2="0.9" y2="0.7" id="fillColor">
            <stop stop-opacity="0.4" stop-color="#dbdfe2" offset="0"/>
            <stop stop-opacity="0.4" stop-color="#d8d8e1" offset="0.3"/>
            <stop stop-opacity="0.4" stop-color="#c9ced3" offset="0.3"/>
            <stop stop-opacity="0.5" stop-color="#dae2e9" offset="0.6"/>
            <stop stop-opacity="0.5" stop-color="#e3e9ed" offset="0.6"/>
            <stop stop-opacity="0.5" stop-color="#e2e9ed" offset="1"/>
        </linearGradient>
          <radialGradient id="circleGrad">
            <stop offset="0%" stop-color="black" />
            <stop offset="100%" stop-color="white" />
         </radialGradient>
        <mask id="myMask">
            <rect width="100%" height="100%" fill="white"/>
            <circle cx="20" cy="180" r="20" 
            fill="url(#circleGrad)"/>
            
            <circle cx="100" cy="20" r="20" 
            fill="url(#circleGrad)"/>
            
            <circle cx="180" cy="180" r="20" 
            fill="url(#circleGrad)"/>
            </mask>
            
            
          <radialGradient id="circleGrad2">
            <stop offset="0%" stop-color="white" />
            <stop offset="100%" stop-color="black" />
         </radialGradient>
        <mask id="myMask2">
            <rect width="100%" height="100%" fill="black"/>
            <circle cx="20" cy="180" r="20" 
            fill="url(#circleGrad2)"/>
            
            <circle cx="100" cy="20" r="20" 
            fill="url(#circleGrad2)"/>
            
            <circle cx="180" cy="180" r="20" 
            fill="url(#circleGrad2)"/>
            </mask>
    </defs>
    
    <script  type="application/ecmascript"><![CDATA[
        function triangle_click(evt){
            const fgPath = evt.target;
            const newVal = fgPath.getAttribute('stroke-dasharray') === '0' ? '30 20' : 0;
            fgPath.setAttribute('stroke-dasharray',newVal);
        }
    ]]> </script>
    
    <path d="M 20,180 L 100,20 L 180,180 Z" 
        stroke="#00ffff" stroke-width="3" 
        fill="url(#fillColor)"
        mask="url(#myMask2)">
        <animate 
            attributeName="stroke-dashoffset"
            values="0;500"
            dur="5s"
            repeatCount="indefinite"
        />
    </path>
    
    <path id="fgPath" d="M 20,180 L 100,20 L 180,180 Z" 
        stroke="url(#borderColor)" stroke-width="3" 
        stroke-dasharray="0"
        stroke-linecap="round"
        fill="url(#fillColor)"
        mask="url(#myMask)"
        onclick="triangle_click(evt)"
        >
        <animate 
            attributeName="stroke-dashoffset"
            values="0;500"
            dur="5s"
            repeatCount="indefinite"
        />
    </path>
</svg>

Now, when I add this SVG into my react app, it throws an error on the 'onClick' event, unless I copy and paste the <script> tag in the inspector, anywhere (Uncaught ReferenceError: triangle_click is not defined at onclick).

Does that mean this script tag was not read initially, that's why it doesn't find it at first place?

Thanks, M

hmm, looks like it doesn't work when I add it in my react app.. I get Uncaught ReferenceError: triangle_click is not defined error on the console — Mat, Jan 11 '23 at 13:15
That makes sense inside react, no? I'm no React man but isn't there a way to use `onclick` as a string so it doesn't get interpreted as an actual event handler by the react dom? — somethinghere, Jan 11 '23 at 13:57

score 0 · Answer 1 · answered Jan 12 '23 at 06:41

0

I found out the issue was that I inserted the element as innerHTML. The answer can be found here: Executing <script> elements inserted with .innerHTML

answered Jan 12 '23 at 06:41

Mat

461
4
14

Use script tag inside SVG in React?

1 Answers1