矢量图像、icon（） 和 path（）

几乎所有的UI设计师都时不时地需要直接在CSS中绘制重要的形状 - 图标，非矩形元素及其背景。

缺乏这样的功能会导致出现远非最佳解决方案：图标字体（如 font-awesome）、使用 CSS 边框工件绘制非平凡形状的疯狂尝试以及过度使用额外的伪元素： ::after 和 ::before .人们正在浪费时间写大量关于这个主题的文章，看看它能走多远......

 矢量图像

请考虑以下 SVG 元素：

<path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" fill="#000" />

请注意属性 d 值。它以非常简单但强大的格式定义了一条路径。但只是为了绘制这条简单的曲线，SVG 需要围绕它创建一堆 DOM 元素。对于这个简单的目的来说，不是那么轻巧。

Sciter 的 CSS 提供 path() 、 icon() 函数和 URL 模式，而不是将 SVG 用于这些简单的目的。

div {
 background-image: url(path:c 50,0 50,100 100,100 c 50,0 50,-100 100,-100);
 background-repeat: no-repeat;
}

这是我在 Sciter 中所做的，它现在支持所谓的路径和路径 url，它们完全使用该 svg 的 d-path 格式：

path（） 图像和 url

div {
 size:300px;
 border:1px solid red;
 background-image: path(c 50,0 50,100 100, 100 c 50,0 50,-100 100,-100);
 background-repeat: no-repeat;
 fill:#000;
}

上述内容将呈现为：

path（） 可以在需要 URL 但带有 path: URL 架构的地方使用。

<img src="path:c 50,0 50,100 100, 100 c 50,0 50,-100 100,-100"/>

上面的那张图片，采用这种风格：

img {
 border:1px dotted;
 fill:gold;
 stroke:red;
 stroke-width: 3px;
}

 将呈现为

icon（） 图片和 url

icon（） 矢量图像是 path（） 的变体，但有两个变体：

 股票图标

Sciter 包含用于装饰内置组件的库存矢量图像的内部库。

此类库存图像可作为 icon(name) “函数”和 URL 访问 icon:name 。这是右指向 V 形的图像：

 <img src="icon:right" />

所有股票图标名称都列在 Sciter SDK 的 usciter 应用程序中：

 自定义图标

应用程序还可以使用 icon( vbox ; d-path ) 构造在其一侧定义图标，其中：

• vbox 是一个字符串，其中包含 4 个数字 = [SVG] 视口在用户空间中的位置和尺寸 - 与 svg：：viewbox 相同。

• d-path - SVG 中 d 属性的路径命令。

因此，如果我们有这样的源 SVG：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
 <path
 fill="none"
 stroke="red"
 d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z" />
</svg>

那么它的 CSS 图标等效项将是

icon.heart {
 foreground-image: icon(0 0 100 100;M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z );
 foreground-repeat: no-repeat;
 foreground-size: contain;
 fill:none;
 stroke:red;
 stroke-width:1px;
}

这将呈现为：

图标的公共集合

 谷歌字体

Google Fonts 包含过多的图标集。那里的单个图标可以导出/保存为具有不同选项的 SVG，随时可以转换为此类矢量图像：

奖励：可扩展的矢量图像

 待定