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

Posted 2023-02-16

【中文标题】如何在 Web 浏览器中以图形方式显示商场中可用的商店或如何从 Flash 切换到 HTML5 和 SVG

【英文标题】：How to show graphicaly in a web browser available shops in a mall or how to switch from Flash to HTML5 & SVG

【发布时间】：2021-04-26 05:04:07

【问题描述】：

我需要在网络浏览器中以图形方式显示多个拥有多家商店的商场，以及一家商店是免费的还是已出租，以及有关该商店的一些信息，例如其表面。如果商店是免费的，它将被涂成绿色，如果它被租用，它将被涂成红色，并且信息将出现在弹出窗口中。我只需要绘制商场的 2D 布局。

我曾使用 Flash 来执行此操作，但由于 Flash 已达到 EOL，我必须改用其他技术。我在考虑 html5 和 SVG，但我不知道该怎么做。我可以挑选你的大脑来知道从哪里开始吗？

一切顺利，

【参考方案1】：

SVG 听起来绝对是做你想做的最好/最简单的方法。

您可以在任何矢量艺术工具（例如 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;

【讨论】：

谢谢@Brad。我试试看。