css使用svg_回到学校：使用SVG和CSS的格纸和行内文本

最新推荐文章于 2024-09-21 01:50:58 发布

cungui5726

最新推荐文章于 2024-09-21 01:50:58 发布

阅读量115

点赞数

文章标签： css java svg html python

原文链接：https://thenewcode.com/7/Back-To-School-Ruled-Paper-and-Lined-Text-using-SVG-CSS

版权

css使用svg

As I’m about to start on another semester teaching web design and development, it seemed appropriate to create a SVG background with a scholastic theme. Being composed of just two straight lines - and therefore closely related to my earlier work on stripes - the background itself is pretty easy to make, so I decided to add the challenge of ensuring that HTML text would always fall on the lines…

当我要开始另一个学期的网页设计和开发课程时，似乎应该以学术主题创建SVG背景。由两条直线组成-因此与我之前在条纹上的工作密切相关-背景本身非常容易制作，因此我决定增加确保HTML文本始终落在直线上的挑战……

The vertical red ruled line - the left margin of the “page” - is one SVG document, red-line.svg:

垂直的红色格线-“页面”的左边缘-是一个SVG文档red-line.svg ：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
    <line x1="15" y1="0" x2="15" y2="16" stroke-thickness="2" stroke="rgba(220,0,0,0.3)" />
</svg>

And the blue horizontal ruled lines are another:

蓝色水平格线是另一个：

<svg xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="15" x2="100%" y2="15" stroke-thickness="2" stroke="rgba(0,0,220,0.3)" />
</svg>

Note the lack of a viewBox for the second document, and the use of 100% for the x2 value of the blue line. Colors for the lines are written in rgba, allowing them to “soak in” to the background.

请注意，第二个文档缺少viewBox ，并且蓝线的x2值使用100% 。线条的颜色写在rgba中，使它们可以“浸入”背景。

吸引他们在一起 (Drawing Them Together)

Both SVG documents are drawn together using CSS multiple backgrounds, and a technique pioneered by Lea Verou:

这两个SVG文档都是使用CSS多个背景绘制在一起的，并且由Lea Verou开创了一种技术：

body { 
    background-image: url(blue-line.svg), url(red-line.svg); 
    background-size: 100vw 1.5em, 32px 32px;
    background-repeat: repeat, repeat-y;
    background-position: 0 0, 64px 0;
    font: 200%/1.5 Bradley Hand, Segoe Script, cursive; 
    margin-left: 120px; margin-right: 100px; 
}

A few notes:

一些注意事项：

The background-size of the blue line is the first value pair: 100% of the width of the document, and 1.5em high (note this value, as it becomes important in a moment).
蓝线的background-size是第一个值对：文档宽度的100％，高1.5em(请注意此值，因为它很快就会变得很重要)。
the blue line is repeated both horizontally and vertically; the red line only repeats vertically.
蓝线在水平和垂直方向都重复；红线仅垂直重复。
the blue line starts in the top left corner, and the red line is 64px in from the left.
蓝线从左上角开始，红线从左起64px。
the typeface is set using the font shorthand: the first value is the font-size, the second line-height. The line-height value exactly matches the vertical spacing used on the background-size of the repeated blue line, meaning that if one increases or decreases, the other does two (you can test this yourself by zooming and reducing the text size).
字体是使用font速记设置的：第一个值是font-size ，第二个是line-height 。 line-height值与重复的蓝线的background-size上使用的垂直间距完全匹配，这意味着如果一个增加或减小，则另一个增加两个(您可以通过缩放和减小文本大小来进行测试)。