SVG 격자 오버레이 이미지

Question

나는 이것을 설명하는 방법조차 모르겠습니다.

저는 바닥 배치가 JPG 형식이므로, 사용자가 mouseOver를 사용하도록 설정하거나지도의 다른 영역을 클릭하여 동적으로 정보를 얻고 싶습니다. 대화 형 인터 페이스의 다른 영역을 얻으려면 동적 SVG 격자를 위에 겹쳐 놓을 수 있다고 생각했습니다. 그런 식으로 동적 데이터를 격자 좌표에 할당 할 수 있습니다.

구현시 문제가 있습니다. 그리드와 이미지를 서로 크기를 조정할 수 없습니다. 또한, SVG 그리드가 동적이기 때문에, 이미지가 더 커지면, 기본적으로 my 그리드는 확대/축소시 좌표를 벗어나는 더 많은 선을 갖습니다.

고정 된 눈금 (예 : 20x10)을 생성하여 이미지에 겹쳐서 표시합니다. 이미지로 확대/축소 하시겠습니까? 오늘 SVG로 시작 했으니 도움을 주시면 감사하겠습니다. 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

에서

코드 내가 SVG 태그를 사용하여 작업을 수행하고이 링크에서 plnkr을 볼 수있는 각도 버전 4를 사용하여 내 자신의지도를 만들 수 관리 - 코드

<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