- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
要垂直对齐 SVG 中 text
元素内的 tspan
元素,CSS 属性 alignment-baseline
和 dominant-baseline
分别在 Chrome 和 FF 中运行良好。到目前为止一切顺利。
使用 Internet Explorer 会变得有点疯狂:
alignment-baseline
alignment-baseline
以及 dominant-baseline
for tspan
,但它们不适用于任何值这对 IE9 来说不是问题(可以简单地 hack the desired alignment ),但由于我想避开浏览器检测,我想知道:
谢谢!
最佳答案
我不知道为什么 IE 不支持对齐基线,更不用说为什么你会得到这样的混合信息。
您可以使用 dy
属性和基于字体的单位(“em”和“ex”)来破解相同的行为。如果您只想将特定文本元素置于某个点的中心,它会非常有效。
<text x="50%" y="50%" dy="0.5ex" text-anchor="middle">
This text will be centered in your coordinate system!
</text>
但 dy
的问题在于——除非 y
也为同一元素明确设置——它是相对于 计算的前一个字符的位置。因此,如果您想使文本范围相对于周围范围居中,则必须首先调整任何先前的偏移量,然后设置新的偏移量。生成的代码并不漂亮:
<text x="50%" y="25%" font-size="150%">
<tspan dy="0.5ex">Large font with</tspan><tspan
dy="-0.5ex"> <tspan
font-size="50%" dy="0.5ex">small font<tspan
dy="-0.5ex"> </tspan></tspan></tspan><tspan
dy="0.5ex">embedded.</tspan>
</text>
<text x="50%" y="75%" font-size="75%">
<tspan dy="0.5ex">Small font with</tspan><tspan
dy="-0.5ex"> <tspan
font-size="200%" dy="0.5ex">large font<tspan
dy="-0.5ex"> </tspan></tspan></tspan><tspan
dy="0.5ex">embedded.</tspan>
http://fiddle.jshell.net/awj49/
在 IE11 中呈现:
(灰线标出引用y坐标)
如果可以的话,只需在每个 tspan 上显式设置 y
属性即可使代码更简洁:
<text x="50%" font-size="150%">
<tspan y="25%" dy="0.5ex">Large font with</tspan>
<tspan font-size="50%" y="25%" dy="0.5ex">small font</tspan>
<tspan y="25%" dy="0.5ex">embedded.</tspan>
</text>
<text x="50%" y="75%" font-size="75%">
<tspan y="75%" dy="0.5ex">Small font with</tspan>
<tspan font-size="200%" y="75%" dy="0.5ex">large font</tspan>
<tspan y="75%" dy="0.5ex">embedded.</tspan>
</text>
http://fiddle.jshell.net/awj49/1/
最终效果图是一样的:
关于javascript - Internet Explorer 和 tspan 垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22513185/
像其他人一样,我需要在 Internet Explorer 6 和 Internet Explorer 7 上测试我的代码。现在,Internet Explorer 8 为开发人员提供了一些很棒的工具
这个问题在这里已经有了答案: 10年前关闭。 Possible Duplicate: Running Internet Explorer 6, Internet Explorer 7, and Int
作为一名开发者,我发现新的 Internet Explorer 版本完全是一场噩梦。我关闭了 Windows 功能,但无法安装 Internet Explorer 10 。它说它已经安装,但事实并非如
我通过Blogger有一个博客-http://www.concertexperiencepeeps.com。每当我尝试通过Internet Explorer查看我的博客时,该页面都会崩溃,并且不允许我
这个问题在这里已经有了答案: 10年前关闭。 Possible Duplicate: Running Internet Explorer 6, Internet Explorer 7, and Int
我正在使用新的Internet Explorer 11开发人员工具将文档模式切换为“8”,但条件注释仍然被忽略,也就是说,它们没有被正确解析并且表现得像普通注释。因此,浏览器不会请求/加载条件注释内的
我在我的一个站点上遇到 Internet Explorer 6 问题,我真的希望我安装它而不是 Internet Explorer 7。有没有一种快速的方法来做到这一点? 最佳答案 下载Microso
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and t
如何访问 Internet Explorer 运行实例的经典 Internet Explorer COM 自动化对象?也就是说,如果我在多个窗口中打开 Internet Explorer,如何从 Po
string filename = Server.UrlPathEncode(Path.GetFileName(_Filename))); Response.AddHeader("Content-Di
当我尝试使用 Apache 2.2 在 Windows7(64 位)上的 IE9 或 IE10 中打开 localhost 时,解析 URL 需要很长时间。其他浏览器没有问题并立即解析 URL,只有
我有一个批处理文件,必须启动 Internet Explorer 并打开 www.google.com .当整个页面加载完成时,它应该终止 IE 进程,即关闭该系统中的所有 IE 实例。我的批处理文件
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 6 个月前关闭。 Improve t
基本上,无论我使用 IE 访问哪个网站,我都可以看到那些黑色/白色形状,一旦我将鼠标移到它们上,它们就会消失。 想知道是否有人知道可能导致这种情况的原因? 另外:http://imageshack.c
我检查了所有注册表,但找不到所有已安装扩展的列表。 此时,IE 扩展/加载项的任何一般位置都会有所帮助。 最佳答案 取自 here : 浏览器帮助对象 - 旨在增强浏览器功能的浏览器插件。 条目可以在
我在Internet Explorer 8的LAN设置中使用了2个不同的自动配置脚本地址。在工作过程中,我需要经常在它们之间进行切换。每次我必须手动进行。 有没有一种方法可以通过脚本等自动执行操作,以
这是一个两部分的问题。我正在构建一个网页,我需要知道: 有没有办法检测 IE 是否启用了平滑滚动(如果是,如何)? 有没有办法强制 IE 关闭我网页的平滑滚动功能? 明确地说,我不是在问如何关闭整个计
我想强制 IE10 在 IE9 模式下从我的 Intranet 呈现某些站点。 我曾尝试使用本地兼容性列表但无济于事(%LocalAppData%\Microsoft\Internet Explore
我在使用 IE8 时遇到问题,其中带有查询字符串的 URL 在下载时被破坏。 特别是,像这样的 URL http://domain.com/software/Software%202.1%20Beta
我有一个非常基本的页面,其中包括 元素。当我提交带有选定文件的表单时,服务器会响应一个在 Excel 中打开的电子表格(“新窗口”)。这种行为意味着初始屏幕和输入元素在 IE 中仍然可见。如果我更改所
我是一名优秀的程序员,十分优秀!