eaglehopes Posted May 14, 2023 Share Posted May 14, 2023 I am trying to reach the div element having inside-svg classname inside an svg element (I put it as foreignObject) but no success. My sample code is like : <style> .sv { stroke:#aa1111; border-radius:20px; border-width:2px; border-color:#ccc; box-shadow:2px 2px darkgray; background-blend-mode: normal; } .sv:hover { background-color: #ccffcc; fill:black; width : border-width:2px; border-color:red; background-blend-mode: difference; /*filter: blur(0.5px) grayscale(2%);*/ } .sv:hover:has(.inside-svg) { background-color:red; color:black; } </style> <svg class="sv" width="200" height="400" xmlns="http://www.w3.org/2000/svg" > <circle x="0" y="0" cx="120" cy="-20" r="150" style="fill:darkgreen;fill-opacity:0.8;stroke:darkgreen;stroke-width:0" /> <text x="50" y="160" font-size="20px" font-family="monospace" font-style="italic" > TRIAL <tspan x="10" y="185">BANNER</tspan> </text> <circle x="20" y="200" cx="10" cy="480" r="250" style="fill:darkgreen;fill-opacity:0.8;stroke:darkgreen;stroke-width:0" /> <circle x="60" y="230" cx="40" cy="460" r="250" style="fill:blue;fill-opacity:.3;stroke:blue;stroke-width:0" /> <foreignObject x="10" y="290" width="100%" height="100%"> <!-- In the context of SVG embedded in an HTML document, the XHTML namespace could be omitted, but it is mandatory in the context of an SVG document --> <div class="inside-svg" style="width:92%;word-break:break;color:white"> having a div inside the svg might be the only way to do this correctly, time permitting </div> </foreignObject> </svg> How can I reach div inside svg and change its foreground color to black? Thanks. Quote Link to comment Share on other sites More sharing options...
Solution requinix Posted May 14, 2023 Solution Share Posted May 14, 2023 Works for me, provided that I'm not using Firefox and that I think the desired behavior is to change the background color of the SVG to red. If you're trying to change the background color of the .inside-svg element then you've vastly over-thought this... Quote Link to comment Share on other sites More sharing options...
eaglehopes Posted May 15, 2023 Author Share Posted May 15, 2023 16 hours ago, requinix said: Works for me, provided that I'm not using Firefox and that I think the desired behavior is to change the background color of the SVG to red. If you're trying to change the background color of the .inside-svg element then you've vastly over-thought this... Thanks requinix for answer. Actually I was learning svg coding and I used https://editsvgcode.com/ page to try my code and did not work. I tried it in my own browserr, both worked... So I think the problem is due to online svg editor. Quote Link to comment Share on other sites More sharing options...
Barand Posted May 15, 2023 Share Posted May 15, 2023 This works with Firefox <script type='text/javascript'> $(function() { $(".circ3").mouseover(function() { $(this).css("fill", "red") $(this).css("fill-opacity", "1") $("#grp1").removeClass('txt1').addClass('txt2') }) $(".circ3").mouseout(function() { $(this).css("fill", "blue") $(this).css("fill-opacity", "0.3") $("#grp1").removeClass('txt2').addClass('txt1') }) }) </script> <style type='text/css'> .sv { stroke:#aa1111; border-radius:20px; border-width:2px; border-color:#ccc; box-shadow:2px 2px darkgray; background-blend-mode: normal; } .sv:hover { background-color: #ccffcc; fill:black; width : border-width:2px; border-color:red; background-blend-mode: difference; /*filter: blur(0.5px) grayscale(2%);*/ } .txt1 { fill: white; } .txt2 { fill: black; } </style> <svg class="sv" width="200" height="400" xmlns="http://www.w3.org/2000/svg"> <circle x="0" y="0" cx="120" cy="-20" r="150" style="fill:darkgreen;fill-opacity:0.8;stroke:darkgreen;stroke-width:0" /> <text x="50" y="160" font-size="20px" font-family="monospace" font-style="italic"> TRIAL <tspan x="10" y="185">BANNER</tspan> </text> <circle x="20" y="200" cx="10" cy="480" r="250" style="fill:darkgreen;fill-opacity:0.8;stroke:darkgreen;stroke-width:0" /> <circle x="60" y="230" cx="40" cy="460" r="250" style="fill:blue;fill-opacity:.3;stroke:blue;stroke-width:0" class='circ3' /> <g id='grp1' class='txt1'> <!-- In the context of SVG embedded in an HTML document, the XHTML namespace could be omitted, but it is mandatory in the context of an SVG document --> <text x='10' y='310' >having a div inside the</text> <text x='10' y='330' >svg might be the only</text> <text x='10' y='350' >way to do this correctly,</text> <text x='10' y='370' >time permitting</text> </g> </svg> 1 Quote Link to comment Share on other sites More sharing options...
eaglehopes Posted May 25, 2023 Author Share Posted May 25, 2023 Thanks Barand, it worked too. But since I am learning javascript too, if you do not mind, can you explain a little bit about the "$" sign in javascript? What is the function of it? Quote Link to comment Share on other sites More sharing options...
Barand Posted May 25, 2023 Share Posted May 25, 2023 JQuery It makes life a lot easier when using javascript. <script type='text/javascript'> $(function() { $(".circ3").mouseover(function() { // handle mouseover event on elements with class "circ3" $(this).css("fill", "red") // $(this) is the target element - change its fill color $(this).css("fill-opacity", "1") // - change its opacity $("#grp1").removeClass('txt1').addClass('txt2') // change class of element with id = "grp1" }) $(".circ3").mouseout(function() { $(this).css("fill", "blue") $(this).css("fill-opacity", "0.3") $("#grp1").removeClass('txt2').addClass('txt1') }) }) </script> 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.