We Keep Coding

How to create a controlled (with React useState) SVG text field?

<div contentEditable>
<svg viewBox='0 0 300 300'>
<text x=2 y=40>
Can this be a text input field?
</text>
<text y=80>
But not this
</text>
<text y=110>
And not this
</text>
</svg>
</div>
The text in the above SVG is editable because it is wrapped in <div contentEditable>, however for our use case this is not ideal as is:
most importantly, we are using React and we'd like the editable text to be controlled in state.
all text in the above SVG is editable, not just the first text field as is desired
it is a big buggy, with the cursor going way far to the right
It is possible to create an individually controlled (with React useState) SVG text field?
EDIT: something along these lines does appear to work:
const [test, setTest] = useState('here is some text');
// And Return
return (<>
<svg>
<foreignObject x="40" y="40" width="300" height="150">
<div xmlns="http://www.w3.org/1999/xhtml">
<FormControl
className='modal-input'
type='text'
value={test}
onChange={(e) => setTest(e.target.value)}
name='firstname'
placeholder='First Name'
/>
</div>
</foreignObject>
...
Where FormElement is from react-bootstrap. We are going to keep working with this and see if it fits our use case fully, but so far, so good!

You can embed HTML fragments (including React portals for example) in SVG using the <foreignObject> tag (which is specifically designed to allow HTML in SVG). BTW I think if you just want to embed some inputs into SVG, doing it using contenteditable does not seem to make any sense. Just use normal <inputs>
<svg viewBox='0 0 300 300'>
<foreignObject x='0' y='0' width='100' height='100'>
<div contenteditable>
Can this be a text input field?
</div>
</foreignObject>
<text y='80'>
But not this
</text>
<text y='110'>
And not this
</text>
</svg>

Including an svg element in my html breaks jquery ui

I am having a very weird issue that I have no idea whatsoever how to debug.
I have a html file with a div that has the jquery UI draggable enabled:
$(function() {
$(".ideanode").draggable({ containment: "parent" });
});
this is working fine and dandy until I include this in my html:
<svg id="connectors" height="100%" width="100%">
<defs>
<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" />
</marker>
</defs>
<line x1="0" y1="0" x2="200" y2="100" class="arrow" />
</svg>
This just completely removes the draggable functionality of my div and I can't even begin to understand why. I will link to a full example as well.
https://codepen.io/ricodon1000/pen/XWmqxeB
If any additional information is needed please ask, I'm still learning how to post really good questions here. Thank you!

add a global style
svg{
background:red;
opacity:.5;
}
and you will see the SVG is covering the whole screen, thus blocking every element underneath

How to change SVG elements/coordinates of a bar graph in applications

I am using the Chartist library in AngularJS in order to create a dynamic chart in an application thatI am making. My goal is to change the css of the bars within the graph but I am not sure how.
When I inspect the HTML of the graph in the application, I see the following code:
< svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="80" class="ct-chart-bar" style="width: 100%; height: 80;">
<g class="ct-grids"></g>
<g>
<g class="ct-series ct-series-a">
<line x1="22.5" x2="22.5" y1="45" y2="45" class="ct-bar" ct:value="0">
</line>
</g>
</g>
<g class="ct-labels"></g>
</svg>
I have found that in order to manipulate the bar graph that I need, I can change the x1/x2 and y1/y2 coordinates in the code above.
I have checked in my .html, .scss, and .ts pages but am not able to find any elements that look like they can be manipulated in order to make this change. Where would you go to manipulate these elements? Any help would be greatly appreciated.

foreignObject display:none in Firefox and Chrome

I have a JavaScript app that works with svg components. I have svg groups as:
<svg id="canvas" width="100%" height="100%" viewBox="0 0 1500 500">
<g class="node-element" x="0" y="0" height="20" width="300" id="node-c87">
<text class="node-element-text" x="12" y="15">person:object</text>
<image x="0" y="4" width="11" height="11" xlink:href="assets/images/object-icon.png"></image>
</g>
<g class="nested-group">
<g class="node-element" x="50" y="100" height="20" width="300" id="node-c87">
<text class="node-element-text" x="12" y="15">person:object</text>
<image x="0" y="4" width="11" height="11" xlink:href="assets/images/object-icon.png"></image>
</g>
</g>
</svg>
And I have defined CSS as follows(CSS on svg groups acts on all child elements of <g>.
.node-element {
display: inline;
}
.node-element :active {
opacity: 0.5;
}
.node-element:hover {
opacity: 0.5;
}
The problem is that it does not work properly in Firefox, whereas it works fine in Chrome. Why and how to fix it?
The node elements are in a tree-like structure where x values differ based on rank. In Firefox, the hover does not properly work on the first couple of node-elements. But works fine on the rest of the node-elements, regardless of the x values.
UPDATE: The problem was actually caused by a foreignObject component, which I have set the elements to display:none. The hover was actually working on the hidden component than the desired element. It was solved by setting the display:none to the foreignObject.
But I would like to know why this was acting differently in the two browsers, Chrome and Firefox?

You probably need to have all look at css pointer-events, documented here. With that you can specify what »region« of your graphic is used for hovers. This can be the AABB (axis aligned Bounding box, nothing or the shape of the graphic).

The problem was actually caused by a foreignObject component, which I have set the elements to display:none. The hover was actually working on the hidden component than the desired element. It was solved by setting the display:none to the foreignObject.

Cannot set opacity to element

I am trying to make and interactive svg which would react to some actions with javascript functions.
My SVG looks like this (this is example of one of many svg I am generating, I deleted some irrelevant elements to make the code more readable):
<svg contentScriptType="text/ecmascript" onmouseover="myOpacity(&apos;msg0&apos;, 0.5)"
onclick="svgClick(&apos;Some example text&apos;)"
width="760" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify"
onmouseout="myOpacity(&apos;msg0&apos;, 1)"
contentStyleType="text/css" height="30" preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg" version="1.0">
<text fill="black" x="10" id="msg0" font-size="10" y="20">Some text</text>
<script xlink:href="script.js" xlink:actuate="onLoad"
xlink:type="simple" xlink:show="other" type="text/ecmascript"
xmlns:xlink="http://www.w3.org/1999/xlink"/>
</svg>
This is my script.js file with onClick and opacity functions:
function svgClick(text) {
alert(text);
}
function myOpacity(element_id, op_value)
{
element = document.getElementById(element_id);
element.setAttribute('opacity', op_value);
}
The problem is that myOpacity function does not work and nothing happens when I hover over my objects (despite the id should correspond to the argument of the function).
However, the onCLick function works perfectly, so the problem is probably with identifying the element by id.
I am quite stuck here, could you take a look in the code and tell me where did I go wrong?
EDIT: this is a followup from this answer: Interactive SVG - how to choose element to react on mouseover action?
That code works there but it somehow does not do anything in the code I posted here. So my question is why? I know I could do this via attributes, but in that case, I do not know how to handle scenario, when I want to set opacity to one element when mouseover action is triggered on another one...

I pasted your code into a jsFiddle (making the JavaScript inline), and it works without problems in Firefox and Chrome:
http://jsfiddle.net/wpZs6/
However, the hover part could be considerably easier with just a CSS hover selector:
<svg width="760" height="30" xmlns="http://www.w3.org/2000/svg" version="1.0">
<style type="text/css">
svg:hover #msg0 {opacity:.5}
</style>
<text fill="black" x="10" id="msg0" font-size="10" y="20">Some text</text>
</svg>
See here: http://jsfiddle.net/L58z6/

try this :
var divtmp = document.getElementById(element_id);
var newStyle = "filter:alpha(opacity=85);-moz-opacity:0.85; opacity: 0.85;";
divtmp.setAttribute("style", newStyle );