SVG栅格覆盖图像

我甚至不知道如何解释这一点。SVG栅格覆盖图像

我有一个JPG格式的地板布局，我想让用户mouseOver或点击地图上的不同区域来获取有关它的动态信息。为了获得不同的地图交互区域，我想我可以在上面或后面叠加一个动态SVG网格，这样，我可以将动态数据分配给网格坐标。

我遇到了实现这个问题，我无法获取网格和图像互相调整大小。此外，由于SVG网格是动态的，因此当图像较大时，默认情况下，我的网格有更多的线条，放大/缩小时会丢弃坐标。

是否有生成一个固定的网格（例如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(){ 

     } 


    }

来源

2016-10-20 chungtinhlakho

展你到目前为止的代码，所以我们可以看到你的错在哪里。 –

罗伯特，我发布的代码，我得到的网格生成的图像上，唯一的程序是缩放，网格间距保持不变。 – chungtinhlakho

你有没有考虑过使用[image map]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map）？这将是一个更简单的解决方案。 –

代码我设法做到这一点使用SVG标签，并采用了棱角分明的版本4，你可以查看这个链接plnkr创建自己的交互式地图 - 请查看代码

<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

来源

2017-05-11 10:52:28

SVG栅格覆盖图像

回答

相关问题