CSS Secret Garden: リング Text_html/css_WEB-ITnose

『CSS Secrets』は、@Lea Verou による最新の本で、CSS に関する小さな秘密を説明しています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

これは一般的なテキスト効果ではありませんが、場合によっては、円形のパスをたどる必要がある短いテキストがいくつかあります。現時点では、CSS は私たちを放棄します。この効果を実現できる CSS プロパティや関数はなく、私たちが考えた CSS ソリューションは面倒なものだけだったので、ただ考えただけでした。本当にそのようなスタイルを実現する方法はないのでしょうか？画像を使用する以外に、テキスト全体の美しさに影響を与えないこと以外に?

juliancheal.co.uk の左側のボタンにリング テキストを使用します (どこを指しているかわかりますか?)。ボタンの破損を避ける唯一の方法はリング テキストです。ボタンの形状は穴でできています

ソリューション

スレッドで構成されています この効果を達成できるスクリプトがいくつかあります。各文字を個別の 要素で囲み、適切な角度に回転させることで、1 つずつ円を構成します。この解決策は非常に面倒なだけでなく、ページの DOM 要素に多くの不必要な肥大化したマークアップを追加します。

現時点では純粋な CSS でこの効果を実現する方法はありませんが、小さなインライン SVG を使用すると非常に簡単に実現できます。 SVG 自体は任意のパスでのテキスト表示をサポートしており、ループはパスの特殊なケースにすぎません。やるだけやってみよう！

SVG でテキストをパスで表示するための基本的な解決策は、テキストを 要素で囲み、それを 要素内に置くことです。 要素は、パス内で id によって定義された 要素を参照します。インライン SVG 内のテキストもフォント スタイルを継承するため (SVG のデフォルト スタイルである line-height を除く)、外部 SVG 画像を導入する場合のようにこれについて心配する必要はありません。

残念ながら、 は 要素内にのみ存在できるため、より読みやすい 要素をパス サークルとして使用できません。

図に示すように、「循環推論は機能するため」という文を、円の全周を占める円形のテキストにしたいとします。

HTML にインライン SVG を追加し、循環パスを定義する必要があります:

<div class="circular">    <svg viewBox="0 0 100 100">        <path d="M 0,50 a 50,50 0 1,1 0,1 z" id="circle" />    </svg></div>

幅と高さではなく、viewBox を通じて単位を定義することに注意してください。これにより、固定サイズではなく、座標系とアスペクト比を設定できるようになります。これにより、コンパクトになるだけでなく、

path の構文がわからなくても、心配する必要はありません。 SVG パス構文をすでに理解している人でも、構文を忘れてしまうのは誰でも同じです。興味があれば、次の 3 つのコマンドに構文のほとんどが要約されています:

• M 0,50 : ポイント (0,50) に移動
• a 50,50 0 1,1 0,1 : From その位置現在の点から新しい点まで円弧を描きます。新しい点の位置は原点から右に 0、下に 1 です。円弧の半径は水平方向と垂直方向の両方で 50 です。 2 つの可能な角度に加えて、2 つの可能な円弧のうち最大のものを選択し、2 つの点の左側ではなく右側の円弧を選択します。
• z : 直線セグメントでパスを閉じます。

なぜ SVG パスの構文は非常にわかりにくいのでしょうか?当初の設計時には、SVG を手動で記述する人は誰もいないと考えられていたため、SVG ワーキング グループはファイル サイズを削減するために可能な限りコンパクトな構文を使用しました。

現在、私たちの道はただの黒い円です。

次のように、 要素と 要素を通じてテキストを追加し、それを xlink:href 属性を通じてサークルにリンクする必要があります。より見栄えよく読みやすくするためにはやるべきことがたくさんありましたが、CSS では何年も実現できなかったであろう、私たちが望んでいたものを達成しました。

次のステップは、円形のパスから黒い塗りつぶしを削除することです。円を何らかの方法で表示する必要はなく、テキストのガイドとして機能するだけです。これを行うには、 (このために特別に設計されています) に追加するなど、さまざまな方法があります。ただし、ここでは SVG タグをできるだけ少なくしたいので、CSS 経由で直接 fill: none を適用します。

れー

黒い丸が消えました

我们可以仔细研究其它问题了。下一步最大的问题是，我们大多数的文本是在SVG元素之外的，还被裁剪了。为了解决这个问题，我们需要让我们的容器元素更小一些，然后为SVG元素应用 overflow: visible ，这样它就不会裁剪它的视窗之外的任何内容了：

.circular {    width: 30em;    height: 30em;}.circular svg {    display: block;    overflow: visible;}

你可以在上图中看到效果。注意到我们已经差不多完成了，但是有一些文本还是被裁剪了。原因是SVG元素是根据它的尺寸浮动的，而不是溢出。因此，事实上，溢出盒子边界的

.circular {    width: 30em;    height: 30em;    margin: 3em auto 0;}.circular svg {    display: block;    overflow: visible;}

就是它了！我们的示例现在看起来和下图非常相像

文本也是可访问的。如果我们的圆形文本只有一个实例（如，一个网站的logo），那我们到这里就完成了。但是，如果我们关于这种类型的文本有不止一个实例，我们不希望每次都重复这些SVG标签，可以写一个简短的脚本来自动生成所需的SVG元素，如类似这样的标签：

<div class="circular">    circular reasoning works because</div>

该代码可以通过一个“circular”类遍历所有元素，移除它们的文本并把它存储在一个变量中，并添加必要的SVG元素：

$$('.circular').forEach(function(el) {    var NS = "http://www.w3.org/2000/svg";    var xlinkNS = "http://www.w3.org/1999/xlink";    var svg = document.createElementNS(NS, "svg");    var circle = document.createElementNS(NS, "path");    var text = document.createElementNS(NS, "text");    var textPath = document.createElementNS(NS, "textPath");    svg.setAttribute("viewBox", "0 0 100 100");    circle.setAttribute("d", "M0,50 a50,50 0 1,1 0,1z");    circle.setAttribute("id", "circle");    textPath.textContent = el.textContent;    textPath.setAttributeNS(xlinkNS, "xlink:href", "#circle");    text.appendChild(textPath);    svg.appendChild(circle);    svg.appendChild(text);    el.textContent = '';    el.appendChild(svg);});