Plan Interactive SVG with Xamarin Forms

Question

I have a interactive SVG file (Floor plan).I need to add click events for each path (room,floor, etc..)
I am using hybridwebview I am not sure that is the right idea for it. am facing a problem with sending data from class c# ( or from Floor.xaml.cs) to page .html ( i want to attribute id into svg room)
or if there is a simple idea such how to iterate the file .svg ! if i can give the <svg> a x:name a iterate it in Floor.xaml.cs
<clipPath id="001">
<path transform="matrix(0,-1,-1,-0,2592,1728)" d="M... Z " />
</clipPath>

<g clip-path="url(#001)">  
                        <path transform="matrix(0,-1,-1,-0,2592,1728)" d="M 698.8634... Z " fill="#ffffff" />  
                        <path transform="matrix(0,-1,-1,-0,2592,1728)" stroke-width="1" stroke-linecap="butt" stroke-miterlimit="10" stroke-linejoin="miter" fill="none" stroke="#000000" d="M 6.. Z " />  
                   </g>  
                    <clipPath id="002">  
                        <path transform="matrix(0,-1,-1,-0,2592,1728)" d="M 690.238 1684.95 L 710.438 1684.95 L 710.438 1706.02 L 690.238 1706.02 Z " />  
                    </clipPath>  
                    <g clip-path="url(#002)">  
                        <path transform="matrix(0,-1,-1,-0,2592,1728)" d="M.... Z " fill="#ffffff" />  
                        <path transform="matrix(0,-1,-1,-0,2592,1728)" stroke-width="1" stroke-linecap="butt" stroke-miterlimit="10" stroke-linejoin="miter" fill="none" stroke="#000000" d="M 700.3378 ... " />  
                    </g>  

Floor.xaml.cs

  public partial class Floor: ContentPage{  
      
public Floor(){  
     InitializeComponent();  
//if it is possible to iterate through the svg ?  
//buildingPlan.  
  
}  
public List<string> GetLocalsId(){  
// simple method return list of locals;  
}  
  }  
  

Answer 1

Hello,
Welcome to our Microsoft Q&A platform!

SVG is a XML format, you can iterate through a SVG file the same as with any XML file. I define a circle SVG and iterate it with XML file like following code:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  
<circle cx="100" cy="50" r="40" stroke="black"  
stroke-width="2" fill="red" />  
</svg>  


var assembly = GetType().GetTypeInfo().Assembly;  
Stream stream = assembly.GetManifestResourceStream("XMLFile.xml");  
XmlDocument xml = new XmlDocument();  
xml.Load(stream);  
var circle = xml.GetElementsByTagName("circle").Item(0).InnerText;  

Also, if you want to click and do something, using HybridWebView might be a good option, any click events generated from the SVG will be Javascript events and would need to be handled in Javascript code on the web page side. Maybe invoking C# from JavaScript will be used, this requires you know about Javascript .

For more informaton , you can refer:
https://stackoverflow.com/questions/44332451/how-can-i-parse-xml-file-type-of-svg
https://stackoverflow.com/questions/35844589/how-to-change-svgs-path-color/35846034
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/hybridwebview

Best Regards,
Wenyan Zhang

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.