svg Questions

Javascript in my SVG files do not run when wrapped in CDATA tags – CSS

March 16, 2023
newnew
2 Answers

I have an SVG file in the form of the following: <svg id="test" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 1435 1084"> <style type="text/css"> svg{background:red} </style> <script type="text/javascript">//<![CDATA[ const x=1; const y=1; if (x===y){ document.getElementById('test').append('<style type="text/css">svg{background:blue}</style>'); }else{} //]]></script> </svg> What I…

VIEW QUESTION

Calculate startOffset to align the middle of the text to the top of a circle in SVG – CSS

March 13, 2023
Nishal Gurung
2 Answers

I want to align the middle of the text with the top of a circle. I'm using <path> and <textpath> to render the text along the circular path in the svg. The startOffset attribute helps to achieve it but I…

VIEW QUESTION

Draggable <text> in SVG is buggy, cursor moves faster than the text being dragged – Reactjs

March 9, 2023
Canovice
3 Answers

We have the following code sample: function DraggableText({ x, y, text }) { const [position, setPosition] = React.useState({ x: x, y: y }); const [isDragging, setIsDragging] = React.useState(false); const [mouseOffset, setMouseOffset] = React.useState({ x: 0, y: 0 }); const handleMouseDown…

VIEW QUESTION

Can SVG <animate> tags' values attribute reference CSS variables? – Html

March 8, 2023
Tavian Barnes
3 Answers

Using values="var(--color1);var(--color2)" in an SVG <animate> tag works in Firefox but not Chrome (see the snippet below). Is there a way to make it work in Chrome? :root { --color1: #7F0000; --color2: #007F00; } <svg width="100" viewBox="-50 -50 100 100">…

VIEW QUESTION

Use SVG sprite as mouse cursor – CSS

March 7, 2023
nagumi
4 Answers

I have an SVG sprite: <svg xmlns="http://www.w3.org/2000/svg" style="display:none;"> <symbol id="ailMouseIco" viewBox="0 0 51.2 76.5"> <path fill="#FFF" stroke="#000" stroke-width="3" d="M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z"/> </symbol> </svg> Elsewhere, I use that sprite as follows: <svg width="30" height="30"> <use xlink:href="#ailMouseIco"></use> </svg> I need…

VIEW QUESTION

How can I merge to svg path? – CSS

March 6, 2023
celal
2 Answers

VIEW QUESTION

Render cursor underneath SVG – Html

March 4, 2023
Grant Moore
2 Answers

I would like to overlay an SVG overtop an entire webpage, cursor included. Is there any way to change the z order of a browser's cursor so that it renders underneath a semi-transparent SVG?

VIEW QUESTION

HTML for SVG diagram

March 4, 2023
Jesse
2 Answers

How do I write the html to create a sitemap using SVG like the image given? diagram svg This is what I have so far <svg width="400" height="200"> <rect x="0" y="0" width="100" height="100" style="fill:lightblue;stroke-width:2;stroke:black" onclick=""/> <text x="50" y="60" text-anchor="middle">MY PAGE</text>…

VIEW QUESTION

Safari rending svg text tspan's in wrong positions when using a RTL language – Html

February 28, 2023
kiewic
2 Answers

Safari is ignoring positions of tspan's with a svg text when text is a RTL and inverting them. Here is the fragment: <svg height="240" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">  <rect width="120" height="120" style="stroke:pink;fill:white;stroke-width:3;" /> <path d="M60,5 L60,115…

VIEW QUESTION

How can I create an svg tag with the same dimention as the browser window? – Html

February 23, 2023
user366312
2 Answers

Suppose, I have the following HTML page: <!DOCTYPE html> <html> <head> <title>Protein Structure Analyzer</title> </head> <body> <div class="menu-strip"> <ul> <li><a href="{{ url_for('index') }}">Home</a></li> <li><a href="{{ url_for('jobs_table') }}">Jobs</a></li> <li><a href="#">Help</a></li> </ul> </div> <div class="angry-grid"> <form> <div class="header-div">SURPASS Plots</div> <div class="form-div"> <div…

VIEW QUESTION