现代 CSS

lulux的博客

如何使用tspan元素给SVG文本添加样式、定位

SVG的<text>元素允许你很简单地定位和给文本添加样式,但是如果你想要针对文本的不同部分定位和添加样式呢?难道我们要去创建多个text元素吗?不需要的。有更简单的方式,tspan来拯救世界了。前两周我们已经看了SVGtext元素,并整理了几个我们可以使用的属性<text>元素不是唯一的SVG文本显示的方式。今天我们来讨论另外两种可以结合<text>元素使用的SVG元素——<tspan><tref>

如何操作SVG Text

上周我们学习了如何使用<text>元素创建SVG文本。在实例中我们设置了xy坐标来定位文本,也尝试了给SVG文本中的每个字符定位。关于<text>元素还有很多内容。在处理SVG文本时,不要局限于xy属性。<text>元素还有几个可以添加的属性,现在我们开始讨论吧。

如何使用SVG Text

SVG文本是将图形和文本两者结合得最好的东西。它可以像其它图形元素一样渲染,这样你可以添加描边和填充,像图形、线条和箭头那样。它还可以被打包成XML字符数据,也就是说它是真的文本。

如何给SVG填充和描边应用径向渐变

图案一样,渐变可以给作品增加深度和趣味。虽然当前的趋势是扁平化设计,渐变还是很经常使用的。上节我们大概讲了线性渐变的内容。今天就到径向渐变啦。径向渐变和线性渐变是很相似的,区别只是在于如何定义渐变。

如何给SVG填充和描边应用线性渐变

给SVG元素应用填充和描边有三种方法(戳这里学习SVG填充和描边的相关内容)。你可以使用纯色、图案或渐变。前面两种方法我们之前已经讲过了,现在我们来讨论第三种方法——渐变。SVG提供了两种渐变——线性、径向。我今天先讲线性渐变,下篇我们再看看径向渐变。

创建和导出SVG的技巧

我们在响应式网页设计的工作中经常用到SVG,这个过程通常包括设计阶段和开发阶段。设计阶段通常是由不懂编程的设计师们完成的。因为原生SVG作为一种图像格式和文档格式,在图形编辑器中创建SVG效果的每一步,都会直接影响生成的代码以及负责嵌入SVG代码、编写脚本或添加动画的开发者的工作。在我的日常工作中,我通常是既做设计师又做开发者,自己处理自己设计的内容,而SVG图像就是我的日常开发内容之一。

如何创建SVG箭头和polymarker——`marker`元素

一个常见的使用SVG绘制的图形是箭头。一行代码就可以创建一个,但是这样代码重复度很大。你也可以在<defs><symbol>中定义好再去重用,但是你每次应用的时候都需要对其移动或旋转。直接用一个<marker>元素的话会方便很多。前面几周的时候我讲过如何组织SVG代码,以及如何定义一个可重用的图形对象。可以翻一下w3cplus上SVG系列文章进行学习~今天我想要讨论一个特殊的元素,可以在一个地方定义,然后在另一个地方引用的——marker,通常用来创建箭头和一些polymarker。

SVG图案:通过图片、属性和嵌套构建更复杂的图案

网页设计元素之一——图案,通常是使用图片创建的。虽然一些图案可以使用CSS创建,但大多数还是涉及某种形式的图片。幸运的是SVG可以很容易创建简单和更复杂的图案,还可以缩放,而且需要很少的http请求。上一篇文章中我们大概看了SVG<pattern>元素的基本内容和属性。通过一个示例展示了如何创建简单的图案。以及简单地介绍了几个<pattern>元素的属性。今天我们继续讨论几个pattern属性,其中一个可以通过引用另一个图案,xlink:href,帮我们创建更复杂的图案。首先快速回顾一下我上次讲过的内容。

如何使用SVG图案

图案是非常常用的设计元素。它可以提供对比,创建一个深度感,并给组合添加趣味。SVG可以很方便地创建和使用图案,随心所欲~我上次提到了这周要讨论一个可以定义并重用的元素,就是pattern啦。这篇文章我们要讨论<pattern>元素,以及如何在SVG中使用这个元素。大概会讲SVG图案的基础,然后下一篇讲解如何创建复杂一些的图案。

TimelineMax:学习使用Bézier Tweening

当你需要一些比较高级的功能的时候,GSAP的插件是非常棒的。我在这篇教程中介绍的BezierPlugin插件,可以使得几乎所有的属性沿着一条由一组点/值定义的贝塞尔曲线路径运动。在正式进入学习之前,我们需要先花点时间来学习贝塞尔曲线到底是什么,以及它是如何诞生的。

页面

返回顶部