How can I edit a svg.js text node at any time? - svg

I find I can't edit a svg text node at any time like HTML node by using "contenteditable" attribute. How mightI solve it? I have referred to this stackoverflow post. But it doesn't work.
How can I get the result that when I double-click a svg text node to edit it?
Please provide an example if you can explain it. Thank you.

Old Questions desereve an answer, too. So here it is:
contenteditable is not in the SVG1.1 Specs which means it does not work.
However you can make the sorrounnding html editable which causes the whole svg to be editable.
I anyway suggest NOT to do that because it most likely will destroy the whole svg when you try to edit it.
In the SVG2 specs the contenteditable attribute will be present!

Related

Anyway to deploy svg image online?

my question is really simple and I still didn't find the answer, maybe because I misspoke about it or didn't use the right keywords, anyways here is the topic:
I have an SVG script that contains some animation (like Bezier curves), I want to put it online, so I get back a link and whenever a user clicks on it, it's going to display my SVG file on the browser.
Is it possible?

Broken design and and not clearly visible dash in EnhancedDateRangePicker Vaadin 14 component

There are two problems that I have using the EnhancedDateRangePicker in Vaadin 14(source: https://vaadin.com/directory/component/date-range-picker):
The design is broken when I add the component somewhere in a layout but that happens only when I add a label. If I don't the design is as expected to be. Here is a screenshot to see what exactly happens -
The other problem is that the dash is not visible clearly in this color(light gray I think). Is there a way to change the color of the dash?
Could you please tell me is there any way to make the design as I mentioned in the above two points?
Thanks in advance :).
The problem is solved. It's not the problem with the component, it is actually the Theme which we are using in our projects and the component just overrides the theme styles and that brokes the component. When I put it in a blank page there is no problem. Thanks you all very much for the effort :).

Can I put HTML in chrome extension's icon

Can I put a HTML code in my chrome extension's icon? According to the Google API (setBadgeText) this isn't possible.
Is there any way to put it there?
While .setBadgeText is, as implied by name, text-only, you can draw anything and set that as your icon.
You'll need to draw on a <canvas>, extract image data and use .setIcon({imageData: /*...*/}) to update the icon.
See this question for a brief example, and maybe this article.
It's not quite "using HTML", but with some work you can output anything to your icon.
Badge is plain text only as can be seen in source code. There's no way around.

Xpages OneUI 3.02 paging looks terrible; how to replace with OneUI 2

I prefer OneUI V3.0.2 to 2.0 except for one element, which is paging. I think the new style looks horrible.
Here is an example of the old paging style:
And here is an example of the new styling:
I would like to replace the new styling with the old, but just for this one element, or at least to create my own style for paging.
I have looked at the OneUI documentation, but there is something that I don't understand. I am using a dataView in my layout, but when I go to look at how things are implemented, it always seems that they are using raw html, so there is a table element in there. I don't understand that. I want to know how to style a custom control, not html.
Any help would be greatly appreciated.
Styling is done by your browsers rendering engine. It applies CSS to HTML. That's how it works. So you need to create some CSS with !important to fix it.
Easiest way to figure it out: load the page, use FF or Chrome Dev tools that allow you to live edit the CSS and see the result instantly. Once you have it, copy to a CSS file and add to your project.
Comparing to a V2 page makes it easier to figure out.
Just reading the CSS source is rather a pain. The Dev tools rock

Getting a simple YUI <select> element example working

Just starting off with YUI and I'm struggling a bit.
I am very interested in the example: Button Control: Using A Menu Button To Replace A Element here http://developer.yahoo.com/yui/examples/button/button-menu-select_log.html .
The example seems very well documented and explained, but I am struggling to get it to work in jsfiddle or codepen.
I guess that I am not sure on how to start the javascript.
What I've been doing is copying and pasting the HTML, CSS, and Javascript into jsfiddle, but I think there is something missing along the lines of YUI().use('node', function (Y) {
I was wondering if someone could maybe take that example and pop it in a jsfiddle or codepen for me, I really have tried very hard to help myself but now feel a bit hopeless.
FWIW I even struggle to get a simple YUI 'Hello World' example going in jsfiddle.
Thank you very much for any help!
Well that example is YUI2, not YUI3, so it's not going to work unless you wrap it in a yui use and bring them in that way YUI 2 in YUI 3

Resources