SVG-Gitter überlagertes Bild

Question

Ich bin nicht einmal sicher, wie ich das erklären soll.

Ich habe ein Grundriss-Layout, das in einem JPG-Format ist, möchte ich Benutzer mouseOver aktivieren oder auf einen anderen Bereich der Karte klicken, um dynamisch Informationen darüber zu erhalten. Um einen anderen Bereich der Karte interaktiv zu gestalten, dachte ich mir, ich könnte ein dynamisches SVG-Gitter über oder hinter ihm überlagern, so dass ich die dynamischen Daten einem Raster zuordnen kann.

Ich habe Probleme mit der Umsetzung dieser, ich kann nicht das Raster und das Bild, um die Größe miteinander zu erhalten. Da das SVG-Raster dynamisch ist und das Bild größer ist, hat das my-Raster standardmäßig mehr Linien, die die Koordinaten beim Vergrößern/Verkleinern wegwerfen.

Ist es weg, um ein festes Gitter (z. B. 20x10) zu generieren und überlagerte es dem Bild. Machen Sie es mit dem Bild zoomen? Ich habe gerade mit SVG angefangen, also würde jede Hilfe sehr geschätzt werden.

-Code in Angular2

<svg attr.width="{{w}}" attr.height="{{h}}" id="mySVG"> 
    <image xlink:href="../asset/building.jpg" x="0" y="0" height="100%" width="100%"/> 
    <rect x="0" y="0" attr.width="{{w}}" attr.height="{{h}}" stroke="black" fill="url(#GridPattern)" stroke-width="5" 
     class="hello"/> 

    <defs> 
     <pattern id="GridPattern" x="0" y="0" attr.width="{{wGap}}" attr.height="{{hGap}}" patternUnits="userSpaceOnUse"> 
      <line x1="0" y1="0" attr.x2="{{wGap}}" y2="0" stroke="lightblue" stroke-width="1px" /> 
      <line x1="0" y1="0" x2="0" attr.y2="{{hGap}}" stroke="lightblue" stroke-width="1px" /> 
     </pattern> 
    </defs> 

    <g id="group1" fill="red"> 
    <!--<rect x="1cm" y="1cm" width="1cm" height="1cm"/> 
    <rect x="3cm" y="1cm" width="1cm" height="1cm"/>--> 
    <text *ngFor="let h of loc" attr.x="{{h.x*wGap}}" attr.y="{{h.y*hGap}}" fill="red" text-anchor='middle'>{{h.text}},h:{{h.y*hGap}},w:{{h.x*wGap}}</text> 
    <text *ngFor="let x of xNum; let i = index" attr.x="{{i*wGap}}" y="20" fill="red" style="writing-mode: tb; glyph-orientation-vertical: 0; 
           letter-spacing: -3;" >{{i}}</text> 
    <text *ngFor="let x of yNum; let i = index" x="20" attr.y="{{i*hGap}}" fill="red">{{i}}</text> 
    </g> 



</svg> 



    import {Component, OnInit,NgZone} from '@angular/core'; 


    @Component({ 
     selector: 'home', 
     template: require('./home.html') 
    }) 

    export class Home implements OnInit{ 
     bol:boolean = true; 

     w:number; 
     h:number; 
     wGap:number; 
     hGap:number; 
     hMultiplier:number = 30; 
     wMultiplier:number = 40; 
     yNum = new Array(this.hMultiplier); 
     xNum = new Array(this.wMultiplier); 
     hLine:any; 
     wLine:any; 

     loc:Object[] = [{x:37,y:3,text:"testing 1"}, 
         {x:31,y:25,text:"testing 2"}, 
         {x:2,y:9,text:"testing 3"}, 
         {x:35,y:8,text:"testing 4"}, 
         {x:22,y:10,text:"testing 5"}] 
     constructor(ngZone:NgZone){ 
      console.log(this.xNum,this.yNum) 
      console.log(window.innerHeight, window.innerWidth); 
      this.w = window.innerWidth-50; 
      this.h = window.innerHeight-200; 
      this.wGap = Math.ceil(this.w/this.wMultiplier); 
        this.hGap = Math.ceil(this.h/this.hMultiplier); 

        ////// 
        //this.calculateLocation(); 
      window.onresize = (e)=>{ 
       ngZone.run(()=>{ 
        console.log(window.innerWidth,window.innerHeight); 
        //this.w = document.getElementById('bldImg')['width']; 
        //this.h = document.getElementById('bldImg')['height']; 
        this.w = window.innerWidth-50; 
        this.h = window.innerHeight-200; 
        this.wGap = Math.ceil(this.w/this.wGap); 
        this.hGap = Math.ceil(this.h/this.hGap); 

        ////// 
        // this.calculateLocation(); 
        console.log(this.wGap) 
        console.log(this.hGap) 
       }); 
      } 
     } 
     ngOnInit(){ 

     } 


    } 

Answer 1

ich es geschafft, es zu tun svg-Tag und erstellen meiner eigenen interaktiven Karte Angular Version 4 Sie die plnkr in diesem Link sehen können - Bitte sehen Sie den Code

<svg 
    version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 800"> 
    <svg:path 
    *ngFor="let country of countries; let i = index" 
    [attr.data-index]="i" 
    (mouseover)="countryHover = country.country_country" 
    (click)="clicked(i)" 
    class="blob" 
    [class.selected]="hasCountry(i)" 
    [attr.d]="country.country_path" 
    fill="currentColor"> 
    </svg:path> 
</svg> 

Image of the Output incase if Plunker doesnt work

https://plnkr.co/edit/2heVmd7l4UokqR2OcNgm?p=preview