Plan Interactive SVG with Xamarin Forms

DevQc 61 Reputation points
2021-06-28T23:34:21.283+00:00

I have a interactive SVG file (Floor plan).I need to add click events for each path (room,floor, etc..)109994-interactive.png
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;  
}  
  }  
  
Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,316 questions
{count} votes

Accepted answer
  1. Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 28,071 Reputation points Microsoft Vendor
    2021-07-01T06:49:20.56+00:00

    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.

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful