如何在网络浏览器中以图形方式显示商场中的可用商店或如何从 Flash 切换到 HTML5 & SVG

Question

我需要在 Web 浏览器中以图形方式显示具有多个商店的多个购物中心，以及商店是免费的还是已租用的以及有关该商店的一些信息，例如其表面。如果免费，商店将涂成绿色，如果是租用的，则涂成红色，信息将显示在弹出窗口中。我只需要绘制商场的二维布局。

我一直在使用 Flash 来执行此操作，但由于 Flash 已停产，我不得不改用其他技术。我在考虑 HTML5 和 SVG，但我不确定该怎么做。我可以请你的大脑知道从哪里开始吗？

祝一切顺利，

Answer 1

SVG 绝对听起来像best/easiest做你想做的事的方式。

您可以在任何矢量艺术工具（例如 Adob​​e Illustrator 或 Inkscape）中构建您的基础商场地图。从那里，您可以使用正常的 CSS 来设置元素的样式。

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS

<circle id="overlay" cx="0" cy="0" r="200" stroke="none" />

然后在你的 CSS:

#overlay {
  fill: #f3f;
}