html – 所以如果图像映射和切片出来了,那是什么？_html-js-css

概述谷歌搜索图像地图和切片清楚地表明,它们不再是理想的工具.鉴于此,采用可点击的复杂形状的最佳方法是什么？我已经完成了一些多个图像的工作,并使用z-index来改变外观,但是对于更复杂的图像(更适合多边形图像映射),是否有一个商定的最佳方法？我并没有真正看到图像地图有任何问题. It’s still in HTML5.最大的缺点是你需要一个好的图像,这可能并不总是你想要的. SVG Using i 谷歌搜索图像地图和切片清楚地表明,它们不再是理想的工具.鉴于此,采用可点击的复杂形状的最佳方法是什么？

我已经完成了一些多个图像的工作,并使用z-index来改变外观,但是对于更复杂的图像(更适合多边形图像映射),是否有一个商定的最佳方法？

解决方法我并没有真正看到图像地图有任何问题. It’s still in HTML5.最大的缺点是你需要一个好的图像,这可能并不总是你想要的.

SVG

Using inline SVG似乎是创建复杂可点击元素的唯一替代方法. Browser support is decent,但不是普遍的.

这是一个可点击星形的例子,我用Inkscape创建了这个SVG,将其保存为“普通SVG”,删除了一些元数据,并添加了< a>标签.

<!DOCTYPE HTML><body><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg><svg   xmlns:dc="http://purl.org/dc/elements/1.1/"   xmlns:cc="http://creativecommons.org/ns#"   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-Syntax-ns#"   xmlns:svg="http://www.w3.org/2000/svg"   xmlns="http://www.w3.org/2000/svg"   version="1.1"   wIDth="744.09448"   height="1052.3622"   ID="svg2">  <defs     ID="defs4" /><!-- Added to inkscape file --><a xlink:href="http://example.com">  <g     ID="layer1">    <path       d="m 214.28571,506.6479 -48.81229,-77.46894 -91.489505,-3.70793 58.593515,-70.36247 -24.74537,-88.1575 85.02508,33.98254 76.  +19603,-50.7764 -6.04513,91.36484 71.8371,56.77595 -88.76117,22.48403 z"       ID="path2985"        />  </g></a></svg></body>

You can also do more complex scripting

一个有用的库：svg.js,Raphaël(热门搜索结果,不是认可).

CSS

传统上,CSS对复杂形状的支持非常有限. “复杂的形状”是指任何不是矩形的东西.最近,你可以做更多,虽然它仍然不是很灵活.

>使用较大的边界半径来创建圆形
>(ab)使用边框创建三角形
>使用CSS3 transforms

这实际上可能足以满足某些用途,与SVG相比,它更容易创建这些形状.但是用CSS创建真正复杂的形状几乎是不可能的. CSS从未真正为此设计过.

帆布

为了完成,我还看了< cancas>元素,允许创建复杂的形状,但我还没有找到一种方法只使形状可点击.

总结

以上是内存溢出为你收集整理的html – 所以如果图像映射和切片出来了,那是什么？全部内容，希望文章能够帮你解决html – 所以如果图像映射和切片出来了,那是什么？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1055199.html

html – 所以如果图像映射和切片出来了,那是什么？

发表评论

评论列表（0条）