w3ctech

[译]优雅的轮廓与 SVG paint-order

一个被很多浏览器实现的 SVG2 属性,用来细粒度地控制你的设计。
原文:Elegant Outlines with SVG paint-order

SVG 渲染使用 painter 的模型来描述图像如何渲染到屏幕。像墙上的油漆层,上层的内容遮盖下层的内容。SVG 规范定义了哪些内容会绘制在其他内容之上。每个形状的不同部分 —— stoke,fill,marker —— 每个都创建绘制层。这些形状绘制在其他层之上,层的顺序就是他们在文档中被定义的顺序。

两个新的属性被引入 SVG2 规范,他们是 z-index 和 paint-order,允许你改变渲染规则。

大多数网站设计者对 z-index 很熟悉,它被 CSS 布局支持很多年了。不幸的是,对于SVG 的z-index,还没有主流浏览器支持。目前,唯一解决办法是通过排列你的标记(或脚本创建的 DOM),使元素按你想他们被绘制的顺序列出。

相反,paint-order 属性在一些浏览器上已经被实现了。如果你原意让你的设计根据浏览器支持水平做出调整,你可以在最新的浏览器用此来微调控制,而其他的浏览器用简单的效果替换。如果你需要在所有浏览器上有相同的展现效果,那么你可以用像 SVG1.1 代码控制的制绘制顺序来实现。这篇文章描述了为什么 paint-order 是有用的,如何在最新的浏览器上使用,以及如何在其他浏览器上模拟。

理解 SVG 绘制属性

你的 SVG 代码中的形状元素,是使用与分辨率无关的数学公式定义的精确的几何曲线,SVG <line> 就是线的概念,即连接两个无限小的点;它自身没有厚度。SVG 的 Text 也是定义成几何轮廓,它是基于字体文件的矢量曲线。

当你在 SVG 中引入了一个没有任何样式信息的形状或文本元素时,它会显示为一个跟你定义的大小一样的黑色的实心区域, 因为fill 的默认值是:solid black 。

fill 属性告诉 SVG 渲染程序如何渲染那个几何形状。对于屏幕上的每个像素 —— 或纸上的墨点 —— 该程序决定该点是在形状的里面还是外面。如果在里面,该程序指向 fill 值并找出下一步做什么。

在简单的场景里(默认的黑色),fill 值是一个颜色,在形状里面的所有点都被替换成了该颜色。在其他情况下,fill 值是一个指令用来查找其他复杂的绘图代码。通过引用一个带有表示指令的 SVG 元素的 ID 的 URL来指示在哪里找。

除了fill之外,你可以通过 stroke 来绘制形状。在计算机图形里,stoke 一个形状意味着沿着它的边界画一条线。不同的程序对 stoke 的意义有不同的解读。

在 SVG 中,stroke 实现为一个在主形状的边界上向内或向外延伸的两种形状。stroke 属性默认值是 none,但它可以设置成一个颜色值或一个 paint server 来创建一个可见的 stroke。stroke 的厚度(通过 stroke-width属性设置)集中在形状的边缘,一半与 fill 区域重叠,另一半在边界外面。其他 stroke 相关的属性控制着形状产生的细节,例如它如何包裹转角,或者切断形状形成虚线。

如果点在内部,程序使用来自stroke属性的绘画指令设置颜色。stroke 的区域的绘画与 fill 主轮廓的方式相同:SVG 渲染程序扫描整个区域,然后决定某个点是在 stroke 内部还是外部。

操作的顺序

当一个形状同时有 fill 和 stroke 绘制时,有些点被同时包含在 fill 区域和 stroke 区域,因此有两种不同的颜色指定。如同所有的 SVG,绘制模型采用:如果两个颜色是不透明的,在上层的颜色替换下层的颜色。

但哪一层是“上面的”?

默认情况下,stroke 绘制在 fill 的上面。这意味着你总是可以看到完整的 stroke 宽度。这也意味着如果 stroke 是半透明的,会出现双色调,fill 绘制的颜色在 stroke 区域的内半部分下面可见,外半部分不可见。

在 SVG1.1 里,将 stroke 绘制在 fill 下面的唯一方式是将其分成两个形状:一个只绘制 stroke,另一个相同的形状复制在同一个地方(用一个 <use> 元素),fill 但不 stroke:

<g stroke="blue" fill="red">
    <g fill="none">
        <path id="shape" d="..." />
    </g>
    <use xlink:href="#shape" stroke="none" />
</g>

上面的代码片段使用了大量继承的样式。 <path> 本身没有直接设置 fill 或 stroke 值;而是继承自他的包含块。所有的 stroke 和 fill 值都设置在包含元素<g>上;在嵌套组和 <use> 元素上,fill 或者 stroke 属性会消失。

SVG2 引进 paint-order 属性让这种效果更容易得到。它的值是由空白隔开的关键字(fill、 stroke 和 markers)组成的列表,它指明了形状各部分应该按照什么顺序绘制。因此,相同的效果可以由一个元素创建:

<path id="shape" d="..." stroke="blue" fill="red" 
      paint-order="stroke fill" />

一些绘制层不指定 paint-order 顺序,会晚一些被绘制(markers 就是这样的情况),相同顺序的会被正常绘制。这意味着交换 fill 和 stroke 的绘制顺序, 你只需要声明为 stroke:

<path id="shape" d="..." stroke="blue" fill="red" 
      paint-order="stroke" />

stroke 会先绘制, 然后是 fill, 最后是其他任何 marker 。整个 fill 区域总是可见的,即使它重叠了 stroke。

paint-order 的默认值(等效于 fill stroke marker)可以显示地设置成普通的关键字。


警告:

在写作本文的时候,paint-order 已被最新版 Firefox (从版本31开始),Blink (从 Chromium 版本35开始), WebKit (从 2014.3 开始)浏览器支持。IE 和 Edge,以及其他老版浏览器使用默认的绘制顺序。


控制绘制顺序的能力对 text 尤其重要。SVG 的 Text 可以像形状一样被 stroke,来创建轮廓效果。但是,最细的stroke除外,其余都会遮挡文字的细节。

为了绘制 fill 区域高出 stroke的 —— 用一个对比颜色 —— 你可以加强文字的形状来恢复可读性。例1使用 paint-order,用一个粗的 stroke 围绕这标题文字来创建一个清晰的轮廓。例1结果图 显示了在支持的浏览器上的结果。

例1

stroke 没有遮挡文字更精细的细节:

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 400 80" width="4in" height="0.8in"
     xml:lang="en">
    <title>Outlined text, using paint-order</title>
    <rect fill="navy" height="100%" width="100%" />
    <text x="50%" y="70" 
          text-anchor="middle"
          font-size="80" 
          font-family="sans-serif"
          fill="mediumBlue" 
          stroke="gold"
          stroke-width="7"
          paint-order="stroke"
          >Outlined</text>
</svg>

例1结果图

将 stroke 绘制在 fill 下面来给文字添加轮廓。

paint-order-okay

优雅降级

如果你完全凭借 paint-order 来达到这个效果,在不支持的浏览器上你的文本会变成一个杂乱的块,就像下面显示的。此时一些回退的策略是必须的。

使用默认顺序 stroke 文本:

图2
paint-order-no-support

一种解决办法是使用 CSS 的 @supports 条件规则,仅当支持 paint-order 时才用轮廓效果。另一种方法是,使用一个不同的样式,如果不是预期效果提供清晰的文本。

下面的例子是例1的修改版本。样式从图像的属性上移除,放在 <style> 里,这样可以使用条件 CSS 。基本的样式包含了一个较窄的 stroke,当绘制顺序不被控制时会生效;@support 块里用粗的 stroke 替换了较窄的并且 paint-order 生效。

在支持 paint-order (目前所有这些浏览器也支持 @support 规则) 的浏览器中,结果看起来跟上面的一样。图2展示了修改后的代码在其他浏览器看起来的样子。

例2

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 400 80" width="4in" height="0.8in"
     xml:lang="en">
    <title>Using @supports to adjust paint-order effects</title>
    <style type="text/css">
        .outlined {
          text-anchor: middle;
          font-size: 80px; 
          font-family: sans-serif;
          fill: mediumBlue; 
          stroke: gold;

          /* fallback */
          stroke-width: 3;
        }

        @supports (paint-order: stroke) {
            .outlined {
              stroke-width: 7;
              paint-order: stroke;
            }
        }
    </style>
    <rect fill="navy" height="100%" width="100%" />
    <text x="50%" y="70" class="outlined"
          >Outlined</text>
</svg>

图3

当不支持 paint-order 时,文本会拥有较窄的轮廓

paint-order-supports


提示:

图1跟图3比,stroke 宽度减少了一半多。但是 stroke 只显示成了较窄的,因为里面的那一半 stroke 现在现在显示在了 fill 上面。


如果你不能接受使用@supports改变的效果,唯一的办法是复制元素,一个用来绘制 stroke,另一个用来绘制 fill。根据你正在使用 SVG 的方式,以及你有多大程度地控制它的样式,你可以在需要的时候用脚本来执行这个转变。因为 paint-order 是一个新的样式属性,在不支持的浏览器里,每个元素都没有这个属性,因此你可以嗅探这些浏览器,并根据需要生成额外的 <use> 元素。

下面的提供了一个简单的脚本,使用 classname 来标识元素,根据需要来执行操作。结果显示在图4。

例3

多元素中模拟 paint-order:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 400 80" width="4in" height="0.8in"
     xml:lang="en">
    <title>Faking paint-order with JavaScript</title>
    <style type="text/css">
        .outlined {
          text-anchor: middle;
          font-size: 80px; 
          font-family: sans-serif;
          fill: mediumBlue; 
          stroke: gold;
          stroke-width: 7;
          paint-order: stroke;
        }
    </style>
    <rect fill="navy" height="100%" width="100%" />
    <text x="50%" y="70" class="outlined"
          >Outlined</text>
    <script><![CDATA[
(function(){
    var NS = {svg: "http://www.w3.org/2000/svg",
              xlink: "http://www.w3.org/1999/xlink"
             };
    var index = 10000;

    var t = document.getElementsByClassName("outlined");   //<1>
    if ( t && 
        (t[0].style["paint-order"] === undefined )){       //<2>
        Array.prototype.forEach.call(t, fakeOutline);      //<3>
    }

    function fakeOutline(el){
        el.id = el.id || "el-" + index++;                  //<4>

        var g1 = document.createElementNS(NS.svg, "g");    //<5>
        g1.setAttribute("class", el.getAttribute("class") );
        el.removeAttribute("class");
        el.parentNode.insertBefore(g1, el);

        var g2 = document.createElementNS(NS.svg, "g");    //<6>
        g2.style["fill"] = "none";
        g2.insertBefore(el, null);
        g1.insertBefore(g2, null);

        var u = document.createElementNS(NS.svg, "use");   //<7>
        u.setAttributeNS(NS.xlink, "href", "#" + el.id);
        u.style["stroke"] = "none";
        g1.insertBefore(u, null);
    }
})();
]]> </script>
</svg>

要修改的元素使用特定的类名 outlined 来标识,方便在脚本中访问元素。

可以对任何元素的样式属性进行检查,以确定它是否支持 paint-order 属性。使用严格相等测试来区分 undefined(属性名不能识别) 和 空值(元素上没有设置的内联样式属性)。

如果需要向后兼容,方法 fakeOutline() 会被有类名的每个元素调用。fforEach() 数组方法将会按需调用此方法。但是, getElementsByClassName() 返回的集合不是一个真的 JavaScript 数组对象,你不能用 t.forEach(fakeOutline)。相反,forEach() 函数是从数组的原型中抽象出的,可以用它的 call() 方法调用。

fakeOutline() 函数将会使用 <use> 元素复制 outline 的元素,因此需要一个有效的 id 值;如果还没有,就使用一个任意的值和一个唯一的索引一起作为 id。

该元素被一个组替换,并且他的所有类都转给来组。这当然是必要的,因为所有的 fill、stroke 样式都是通过类来设置的,而不是标签名或通过图像属性。insertBefore() 方法用来确保新的组在 DOM 树中跟需要替换的元素保持相同的位置。

嵌套组包含初始元素,并且阻止它继承 fill 样式。

最后,<use> 元素复制元素,但是取消 stroke 样式以便它只继承 fill 样式。然后插入到大组里作为最后一个子元素,以便它绘制在没有 fill 的版本上。

图4

paint-order-script

正如你所知道的,对于如此简单的效果,脚本却颇为复杂。一个更为通用的回退脚本 —— 对属性的一个完整的 polyfill —— 或许会更复杂,因为你需要考虑一个属性被应用到元素的各种方式。事实上,你需要重建 CSS 解析器的工作,确定所有的因为无效而被丢弃的样式规则。

在大多数场景里,如果最终效果必须在所有浏览器中展现,使用脚本,在你的标签里很容易创建 stroke 和 fill 的分层对象,然后直接创建该结构。

<g class="outlined">
    <g style="fill: none;">
        <text id="el-10000" x="50%" y="70">Outlined</text>
    </g>
    <use style="stroke: none;" xlink:href="#el-10000" />
</g>

w3ctech微信

扫码关注w3ctech微信公众号

共收到0条回复