文章列表
相关文章
更多最近更新
更多SVG文本text
2019-05-07 00:01|来源: 网路
SVG 文本 - <text>
<text> 元素用于定义文本。
实例 1
写一个文本：
下面是SVG代码：
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="0" y="15" fill="red">I love SVG</text> </svg>
运行结果
实例 2
旋转的文字：
下面是SVG代码：
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text> </svg>
运行结果
实例 3
路径上的文字：
下面是SVG代码：
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="path1" d="M75,20 a1,1 0 0,0 100,0" /> </defs> <text x="10" y="100" style="fill:red;"> <textPath xlink:href="#path1">I love SVG I love SVG</textPath> </text> </svg>
运行结果
实例 4
元素可以安排任何分小组与<tspan> 元素的数量。每个<tspan> 元素可以包含不同的格式和位置。几行文本(与 <tspan> 元素):
下面是SVG代码：
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="10" y="20" style="fill:red;">Several lines: <tspan x="10" y="45">First line</tspan> <tspan x="10" y="70">Second line</tspan> </text> </svg>
运行结果
实例 5
作为链接文本（ <a> 元素）：
下面是SVG代码：
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://www.w3schools.com/svg/" target="_blank"> <text x="0" y="15" fill="red">I love SVG</text> </a> </svg>
运行结果
相关问答
更多-
我认为它应该如此简单 text.attr({ text: 'my new text'}); 所以 setTimeout( function() { text.attr({ text: 'my new text'}) }, 2000 ); 会测试它 I think it should be as simple as text.attr({ text: 'my new text'}); so setTimeout( function() { text.attr({ text: 'my new text'} ...
-
对于非常清晰的边缘，您可以使用过滤器来分隔文本。
对齐SVG中的文本(Aligning text in SVG)[2022-04-05]
原来你不需要显式的文本路径。 Firefox 3只支持垂直对齐标签（ 请参阅此线程 ）。 似乎主导基线仅在作为样式应用时起作用，而文本锚可以作为样式或标签属性的一部分。更好的SVG旋转文本渲染(Better SVG rotated text rendering)[2022-03-27]
我有类似的问题。 当文本旋转时所有字母都在抽搐。 它发生在所有浏览器中。 幸运的是，我没有那么多旋转文本，我只是将text转换为path 。 之后它完美地运作。 但是如果你必须旋转很多文本 - svg的大小会急剧增加。 I had similar problem. When the text is rotated all the letters twitching. And it happens in all browsers. Fortunately, I had not so many text for ...SVG中的文本不会出现(Text in SVG does not appear)[2022-06-18]
您将错误的值传递给createElementNS的第一个参数。 它应该如下.§ var newText = document.createElementNS("http://www.w3.org/2000/svg", "text"); newText.setAttributeNS(null,"x",0); newText.setAttributeNS(null,"y",50); newText.setAttributeNS(null,"font-size","100"); newText ...JQuery SVG绘图文本(JQuery SVG Drawing Text)[2022-07-11]
这里有几个简单的jQuery SVG Text示例： // Simple jQuery SVG Text examples var g = svg.group( {fontWeight: 'bold', fontSize: '32.5', fill: 'salmon'} ); svg.text(g, 10, 40, "Here's an example of SVG Text"); svg.text(g, 10, 80, "in a ...我认为你必须使用相对大小的字体大小。 请参阅http://www.w3.org/TR/SVG11/coords.html#UnitIdentifiers 。 当您使用像pt或cm这样的绝对尺寸时，会自动计算尺寸必须正确显示在显示器上的大小，才能获得该尺寸。 但是，当您使用px时，将使用当前视口。 如果您没有指定单位，那么用户单位也会在链接文档的示例中使用：Text size is 50 user units I think you h ...SVG中心文本(SVG center text)[2022-08-19]
如果您不打算为文本提供x / y值，您必须将原点绘制在原点的中心。 我大致将宽度/高度除以2，并将其作为负数以显示以下。