Page 172 - css揭秘

.circular path { fill: none; }

现在，这个黑色圆形终于看不见了（参见图 5-45），我们可以更仔细地
研究剩下的问题了。接下来最大的问题是，几乎所有的文本都跑到 SVG 元
素的外面去了，而且遭到了裁切。为了修正这个问题，我们需要让这个容器
元素变小，然后再给 SVG 元素应用 overflow: visible 样式，这样它就不
会把内容的溢出部分裁切掉了：

.circular {
width: 30em;
height: 30em;
}

.circular svg { 图 5-45
display: block; 在把路径设置为不可见之后，其
overflow: visible; 他问题就变得清晰了
}

你可以在图 5-46 中看到结果。请注意我们已经接近目标了，但仍然有
一部分文本是被裁切掉的。原因在于 SVG 元素只会基于它自己的尺寸（而
不是它溢出的内容）来影响布局流。因此，即使有一些文本溢出到了这个
<svg> 元素创建的方框之外，这些溢出部分也不会把 SVG 元素自身往下推。
我们需要用外边距来手工处理一下：

.circular {
width: 30em;
height: 30em;
margin: 3em auto 0;
}

.circular svg {
display: block;
overflow: visible;
}

这就成了！我们现在得到的效果看起来跟图 5-42 一模一样，而且这段
文本在可访问性方面也是完美的。如果页面上只有一处需要用到环形文字
（比如网站的 logo），那我们就可以收工了。但如果有好几处都需要用到这种
效果，那我们肯定不想把 SVG 代码在每个地方都重复一次。为了避免这种
重复，我们可以写一小段脚本来自动生成必要的 SVG 元素，而结构只需要
写成：

<div class="circular"> HTML
circular reasoning works because
</div>
图 5-46
这段脚本会遍历所有设置了 circular 类的元素，将其文本内容删除并
上图：对容器元素设置宽度和高度；
保存在变量中，然后为其填入必要的 SVG 元素： 下图：为这一团糟设置 overflow:
visible 样式

28 环形文字 141

඀ࠡ JOEC