Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Get separated element by it's id.

See original GitHub issue

Hi, Is there a way I could get some portion of the drawing by it’s “id” attribute? I’m currently loading the drawing via SvgViewBox but from what I see this only produces raw GeometryDrawing instances on drawing canvas that I cannot identify. Is there any way I can do this at the moment?

On top page you wrote “Interaction with the conversion process (by a visitor pattern) to allow for custom hyper-link implementations, font substitutions etc.” by I’m not sure if this is what I need and can’t find example of that.

Basically I have drawn some buttons in illustrator and would like modify some basic stuff at runtime - toggle visibility, maybe change some background, or size. Can I force converter to output WPF Grids for named elements?

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

paulushubcommented, Dec 19, 2020

Really nice work you are doing with this stuff, highly impressive.

installed latest SharpVectors nuget package the WpfDrawingDocument.DrawingNames don’t store any name.

True, the initial release was experimental and the updated version even add more information to the drawings that are not needed except when you need the features in WpfDrawingDocument. So, I made it optional, you have to set the a new property, InteractiveMode to either SvgInteractiveModes.Standard or SvgInteractiveModes.Advanced. For now there is no difference between the Standard and Advanced modes. For the advanced mode, I am thinking about something in line with your work but by rendering each individual drawing to DrawingVisual, which is still lighter object but supports interactivities unlike the Drawing objects.

I have posted a pull request to your repository, so you can take a look at the updates to make it work.

I would like to be able to change text of the <text> element.

It is one of the puzzle I have still not resolved yet. At the WPF low-level, that flexibility of simple changing characters is not there, so you may need to recreate the GlyphRunDrawing or set both GlyphRun.Characters and GlyphRun.GlyphIndices, I have not tried it.

The main problem is when the text is rendered as PathGeometry, there you cannot even tell the original character contents.

I concerned about object’s transform’s center.

WpfDrawingDocument contains the SVG DOM or SvgDocument object instance WpfDrawingDocument.Document , which is an extension of the .NET XmlDocument class, so you can query it for all other contents. If necessary, we can support the Inkscape contents like the metadata contents element, SvgMetadataElement; say SvgInkscapeElement with specialized properties to make things easier.

Audionysoscommented, Dec 17, 2020

Hello, I actually didn’t expect from you to be that quick 😃 I’ve only find out that you responded about half a year ago and I played around with this but I didn’t finish what I wanted, then I couldn’t find the project I made and now I just moved back to in yesterday and made some progress.

So this seem to work. I made a little explorer class based on the WpfDrawingDocument to manipulate the image easier. It may not fit your programming style but it works nice for me, and the ids do work.

public MainWindow() {
	var d = new SVGExplorer("data/test.svg");
	Content = d.view;
	d["star"].look.fill = Brushes.Black;
	d["star"].events.mouse.DOWN += (s, e) => {
		var r = d["rect815"];
	d["rect815"].events.mouse.DOWN += (s, e) => {
		var o = d["path821"];
		o.transform.x += 30;
		if (o.transform.x > 300) o.transform.x = 0;

		o.transform.scale *= 1.5;
		if (o.transform.scale > 3) o.transform.scale = 1;
		o.transform.rotation += 20;


Now, I still didn’t figure out few things.

  1. Initially I added this project to my local repo of SharpVectors and it works from there. However when I extracted this to separate solution and installed latest SharpVectors nuget package the WpfDrawingDocument.DrawingNames don’t sore any name. Do I need to specify some additional configuration for the properties. Here is the link for this solution.

  2. I would like to be able to change text of the <text> element. But I’m not sure how to do this. I tried to set Characters property of GlyphRunDrawing, but this gives me an exception. I’m also not sure if a new text would be properly placed. Can you give me some hints? How you set up these glyph runs?

  3. I concerned about object’s transform’s center. Inkscape exports path with absolute coordinates or relative to layer and produced WPF drawings seem to reflect that. However this is not ideal when I rotate or scale an object. I can set pivot point relative to AABB of the drawing and this works ok in most scenarios. However there are some object for which this is not desirable. For example the AABB of a star may not be in it’s center. For star I can calculate center of a mass to rote it in place, however there are still some other scenarios where it would be nice to specify pivot in a drawing software. For example if I would like to animate pointer of a gauge, it’s practically impossible to figure out the point in code:


When I move the point in Inkscape, I see Inkscape saves this as inkscape:transform-center-x/y. This suggest that defining such point is not native for SVG, so you probably will not support it. Perhaps maybe there is a way I can access whole original svg element that is associated with the drawing similar to how I access WpfDrawingDocument.DrawingNames?

Read more comments on GitHub >

github_iconTop Results From Across the Web

how can I use split inside of getElementById("demo") to get ...
Can this be done with XMLHttpRequest , getElementById , and the split command to make multiple id tags based on a character that...
Read more >
Get part of element ID - javascript
I am getting the number part of the container ID that the button is in. Now I am wondering if I need to...
Read more >
Searching: getElement*, querySelector*
If an element has the id attribute, we can get the element using the method document.getElementById(id) , no matter where it is.
Read more >
How to Get Elements by Class, ID, Tag Name, or Selector in ...
This tutorial will teach you how to access DOM elements in JavaScript with the help of their class, id, tag name or selectors....
Read more >
HTML DOM Element id Property
The id property sets or returns the value of an element's id attribute. Note. An id should be unique within a page. See...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found