小编mja*_*mja的帖子

如何在CSS中创建一个"标题"(工具提示,弹出窗口,替代文本)以与SVG一起使用,而无需JavaScript

使用SVG中的"title"属性创建弹出窗口非常容易.但是你如何用CSS实现同样的效果呢?

这是我为维基媒体制作的一个例子,我努力让其他维基人员想要在嵌入式样式表中纠正大部分内容,其中样式属性按照现实主题分组.大多数维基百科编辑都是计算机文盲,你不能指望他们通过大量代码进行修改以及如果他们必须在代码中改变除了简单的CSS值之外的任何东西,那么你可能会得到一个令人讨厌的混乱.如果我为他们可怜的大脑努力做到这一点,那么迟早有人会通过使用Inkscape,Illustrator或其他同样可怕的矢量编辑器来使文件无法维护.

我可以使用Javascript,但这会使插图不易访问,并使代码更容易让需要编辑它的人感到困惑.此外,由于这一点,一些使用Javascript的SVG文件已从维基媒体中删除,但我不确定这是否是绝对的规则.


我刚刚发现,当我验证我的文件时,SVG中的title-attribute不允许在我使用它的地方,但它适用于大多数浏览器.根据标准,您应该使用title-element,但这似乎不适用于任何浏览器.此外,根据标准,我可以给一个样式元素一个title-attribute,但这似乎不适用于任何浏览器,它需要我使用180个样式元素而不是一个(代码是由脚本生成,因此创建它们不是问题,只是它会使代码更大,更难理解).


到目前为止我得到的两个"答案"并不是针对我提出的问题,甚至没有用处.

不在乎图像是否可以在Inkscape中编辑.Inkscape是创建位图图像的好工具(即使你必须通过其他程序运行它们以便之后获得更好的压缩).Inkscape很难创建SVG文件(或任何面向观众的基于矢量的图像文件,Inkscape创建的基于矢量的图像文件只对Inkscape非常有用),Inkscape是一个非常非常非常糟糕的工具,可用于创建预期的SVG图像作为最终产品; Sodipodi是一个很好的工具,但是Inkscape并不是Sodipodi,只是基于Sodipodi(不幸的是,Sodipodi的旧C版本在现代计算机系统上运行不佳而且C++版本从未完成).我希望使用文本编辑器轻松编辑我的图像,这样任何维基百科都不会试图使用Inkscape并使文件无法管理(并且在此过程中将大小从略小于2 MB增加到超过60 MB,如果你将它作为"标准"SVG图像保存在Inkscape中(并不总是提供标准的兼容文件),Inkscapes自己的基于svg的文件格式可以生成更大的文件).

我不认为维基百科允许在SVG图像中使用javascript,因此Javascript是不可能.

我已经知道如何使用javascript和两种不同的方法创建工具提示来在SVG中创建它们(但不是在SVG中嵌入的CSS中).除了在原始问题中已经提到的那个之外,我不想在工具提示中使用SVG代码的原因是没有Web浏览器支持标准,但SVG查看器(但不是非标准)与浏览器一起使用的工具提示),那么手动对文件中的工具提示进行更正(使用文本编辑器)的人必须在两个不同的地方更改文本,最有可能的是,随着时间的推移,在查看时会导致不同的工具提示在不同的浏览器/查看器中.

css svg wikipedia

11
推荐指数
2
解决办法
5705
查看次数

标签 统计

css ×1

svg ×1

wikipedia ×1