小编Ale*_*rov的帖子

长话短说

\n

编辑SVG > Illustrator > SVG时，原始元素类会丢失。如何以安全的方式直观地编辑 svg 文件？

\n

简要背景。我对基于单个 svg 文件的微型 GIS 的想法很着迷。这是我家乡的交互式热图，其中包含建筑物的颜色编码建筑价值以及 Google 地图 API 中不提供的一些视觉效果。因此，我已经设法： 将墨卡托投影中的街道地图从 OpenStreetMap 转换为具有地理参考坐标的 SVG；将建筑物多边形与地址、楼层数和建造年份联系起来；实现可接受的缩放和滚动性能（感谢 D3.js）。

我想象如何使用 SVG。两个有时交替的任务：

\n
1. Adobe Illustrator 中的视觉几何校正：校正地形错误、将多边形转换为复合形状（带庭院的建筑物）等。
\n
2. 在 Chrome 控制台中使用 JavaScript 和 CSS 进行数据可视化。向多边形添加多个类或数据属性，它们负责视觉表示。例如，在样式表中使用不同的选择器和规则，我可以根据建筑物的建筑风格、高度和建造时间段，在特定大小、亮度和色调的多边形周围创建发光：<polygon class="bld bld-type-public bld-age-soviet bld-style-constructivism" data-storeys="4" data-year="1927" id="b5270" points="2427,788 2435,786 2436,790 2433,791 2428,792"></polygon>
\n

这个过程是漫长且反复的。矢量图像需要定期编辑，同时根据收集的数据进行 DOM 操作。

面对现实。Adobe Illustrator 作为编辑复杂矢量图像的强大工具，可将 SVG 文件的 DOM 转换为其自己的对象模型。但它并没有完全做到这一点。在我的方法中，一些数据在 Illustrator 中编辑后会永久丢失。

我认为默认（不透明）-webkit-tap-highlight-color是在进行复杂的 DOM 操作之前对用户触摸做出反应的最快方式。这在较旧、速度较慢的设备上尤其明显。

据我了解，该border-radius规则不适用于点击突出显示。对于圆形按钮之类的元素还有什么方法可以做到这一点吗？

button {
  appearance: none;
  border: none;
  padding: 1em 2em;
  border-radius: 2em;
  -webkit-tap-highlight-color: rgba(0,0,0,0.2);
}
button:active {
  color:red;
}

<button>Enter</button>