如何在将 imagemap 转换为 svg 时更改坐标?
How to change coordinates while converting imagemap to svg?
我想将图像映射转换为 svg,因为图像映射不会随着浏览器大小的变化而调整大小。
我该如何更改坐标和标签?
<img id="image" src="ch01ch01.png" width="453" height="453" usemap="#map"/>
<map name="map" id="id_1">
<area class="notbutton" shape="poly" id=12 coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227"
onmouseover=" Display_img(curr_base_id,'12')" onclick="change_BASE_ID('12',this.className)" onmouseout="Display_base_img()"/>
<area class="notbutton" shape="poly" id=11 coords="173,229,181,229,184,243,192,256,201,265,201,271,179,309,174,302,125,375,106,361,88,342,71,319,59,295,52,270,48,252,47,243,65,240,61,248,147,234,147,236,150,234,150,238,154,234,154,239,156,235,159,246,165,262,175,275,185,284,195,270,184,259,177,249,174,237,173,229"
onmouseover=" Display_img(curr_base_id,'11')" onclick="change_BASE_ID('11',this.className)" onmouseout="Display_base_img()"/>
</map>
我自己也遇到过同样的问题,并找到了一个杀手级的 jQuery 插件来帮助 IMMENSELY:
http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
它动态调整大小并重新定位我的图像地图区域。
相当于你的地图...
<img id="imageMaps" src="http://i.stack.imgur.com/oWffP.jpg" usemap="#20Keys" width="604" height="604" alt="Select Key" border="0"/>
<map id="20Keys" name="20Keys">
<area shape="circle" alt="Key 1" title="" coords="41,54,31" href="" target="" />
<area shape="circle" alt="Key 2" title="" coords="41,543,31" href="" target="" />
<area shape="circle" alt="Key 3" title="" coords="538,543,31" href="" target="" />
<area shape="circle" alt="Key 4" title="" coords="499,293,31" href="" target="" />
<area shape="circle" alt="Key 5" title="" coords="484,213,31" href="" target="" />
<area shape="circle" alt="Key 6" title="" coords="79,293,31" href="" target="" />
<area shape="circle" alt="Key 7" title="" coords="141,145,31" href="" target="" />
<area shape="circle" alt="Key 8" title="" coords="483,374,31" href="" target="" />
<area shape="circle" alt="Key 9" title="" coords="209,99,31" href="" target="" />
<area shape="circle" alt="Key 10" title="" coords="290,504,31" href="" target="" />
<area shape="circle" alt="Key 11" title="" coords="289,83,31" href="" target="" />
<area shape="circle" alt="Key 12" title="" coords="370,99,31" href="" target="" />
<area shape="circle" alt="Key 13" title="" coords="370,488,31" href="" target="" />
<area shape="circle" alt="Key 14" title="" coords="95,213,31" href="" target="" />
<area shape="circle" alt="Key 15" title="" coords="438,442,31" href="" target="" />
<area shape="circle" alt="Key 16" title="" coords="438,145,31" href="" target="" />
<area shape="circle" alt="Key 17" title="" coords="95,374,31" href="" target="" />
<area shape="circle" alt="Key 18" title="" coords="141,442,31" href="" target="" />
<area shape="circle" alt="Key 19" title="" coords="209,488,31" href="" target="" />
<area shape="circle" alt="Key 20" title="" coords="538,45,31" href="" target="" />
</map>
响应式 SVG 的形式如下:
<svg id="imageMaps" width="100%" height="100%" viewBox="0 0 604 604" pointer-events="fill" fill="none">
<title>Select Key</title>
<image xlink:href="http://i.stack.imgur.com/oWffP.jpg" width="604" height="604"/>
<a xlink:href="" target="">
<circle cx="41" cy="54" r="31">
<title></title>
</circle>
</a>
<a xlink:href="" target="">
<circle cx="41" cy="543" r="31">
<title></title>
</circle>
</a>
<a xlink:href="" target="">
<circle cx="538" cy="543" r="31">
<title></title>
</circle>
</a>
<!-- etc -->
</svg>
我只做了前几个地图圈。
相当于
<area shape="poly" coords="..coord pairs here.."/>
在 SVG 中是:
<polygon points="..coord pairs here.."/>
我想将图像映射转换为 svg,因为图像映射不会随着浏览器大小的变化而调整大小。 我该如何更改坐标和标签?
<img id="image" src="ch01ch01.png" width="453" height="453" usemap="#map"/>
<map name="map" id="id_1">
<area class="notbutton" shape="poly" id=12 coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227"
onmouseover=" Display_img(curr_base_id,'12')" onclick="change_BASE_ID('12',this.className)" onmouseout="Display_base_img()"/>
<area class="notbutton" shape="poly" id=11 coords="173,229,181,229,184,243,192,256,201,265,201,271,179,309,174,302,125,375,106,361,88,342,71,319,59,295,52,270,48,252,47,243,65,240,61,248,147,234,147,236,150,234,150,238,154,234,154,239,156,235,159,246,165,262,175,275,185,284,195,270,184,259,177,249,174,237,173,229"
onmouseover=" Display_img(curr_base_id,'11')" onclick="change_BASE_ID('11',this.className)" onmouseout="Display_base_img()"/>
</map>
我自己也遇到过同样的问题,并找到了一个杀手级的 jQuery 插件来帮助 IMMENSELY:
http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
它动态调整大小并重新定位我的图像地图区域。
相当于你的地图...
<img id="imageMaps" src="http://i.stack.imgur.com/oWffP.jpg" usemap="#20Keys" width="604" height="604" alt="Select Key" border="0"/>
<map id="20Keys" name="20Keys">
<area shape="circle" alt="Key 1" title="" coords="41,54,31" href="" target="" />
<area shape="circle" alt="Key 2" title="" coords="41,543,31" href="" target="" />
<area shape="circle" alt="Key 3" title="" coords="538,543,31" href="" target="" />
<area shape="circle" alt="Key 4" title="" coords="499,293,31" href="" target="" />
<area shape="circle" alt="Key 5" title="" coords="484,213,31" href="" target="" />
<area shape="circle" alt="Key 6" title="" coords="79,293,31" href="" target="" />
<area shape="circle" alt="Key 7" title="" coords="141,145,31" href="" target="" />
<area shape="circle" alt="Key 8" title="" coords="483,374,31" href="" target="" />
<area shape="circle" alt="Key 9" title="" coords="209,99,31" href="" target="" />
<area shape="circle" alt="Key 10" title="" coords="290,504,31" href="" target="" />
<area shape="circle" alt="Key 11" title="" coords="289,83,31" href="" target="" />
<area shape="circle" alt="Key 12" title="" coords="370,99,31" href="" target="" />
<area shape="circle" alt="Key 13" title="" coords="370,488,31" href="" target="" />
<area shape="circle" alt="Key 14" title="" coords="95,213,31" href="" target="" />
<area shape="circle" alt="Key 15" title="" coords="438,442,31" href="" target="" />
<area shape="circle" alt="Key 16" title="" coords="438,145,31" href="" target="" />
<area shape="circle" alt="Key 17" title="" coords="95,374,31" href="" target="" />
<area shape="circle" alt="Key 18" title="" coords="141,442,31" href="" target="" />
<area shape="circle" alt="Key 19" title="" coords="209,488,31" href="" target="" />
<area shape="circle" alt="Key 20" title="" coords="538,45,31" href="" target="" />
</map>
响应式 SVG 的形式如下:
<svg id="imageMaps" width="100%" height="100%" viewBox="0 0 604 604" pointer-events="fill" fill="none">
<title>Select Key</title>
<image xlink:href="http://i.stack.imgur.com/oWffP.jpg" width="604" height="604"/>
<a xlink:href="" target="">
<circle cx="41" cy="54" r="31">
<title></title>
</circle>
</a>
<a xlink:href="" target="">
<circle cx="41" cy="543" r="31">
<title></title>
</circle>
</a>
<a xlink:href="" target="">
<circle cx="538" cy="543" r="31">
<title></title>
</circle>
</a>
<!-- etc -->
</svg>
我只做了前几个地图圈。
相当于
<area shape="poly" coords="..coord pairs here.."/>
在 SVG 中是:
<polygon points="..coord pairs here.."/>