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>

运行结果

1.png



实例 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>

运行结果

2.png



实例 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>

运行结果

3.png



实例 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>

运行结果

4.png



实例 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>

运行结果

5.png


相关问答

更多

如何获得SVG文本的“crispEdges”?(How to get “crispEdges” for SVG text?)

对于非常清晰的边缘,您可以使用过滤器来分隔文本。 <svg width="400px" height="400px"> <defs> <filter id="crispify"> <feComponentTransfer> <feFuncA type="discrete" tableValues="0 1"/> </feComponentTransfer> </filter> </defs> <text filter="url(#crispify)" font-size="6

svg / snapsvg创建弯曲的文本(svg / snapsvg creating text that bends)

SVG是定义具有弯曲尺寸的路径所必需的。 这是一个例子: <svg height="70" width="300"> <defs> <path id="myTextPath" d="M 30 55 q 100 -46 240 0" /> </defs> <rect x="0" y="0" height="70" width="300" fill="#292425" /> <text x="10" y="100" style="font-size: 18px; s

JQuery SVG绘图文本(JQuery SVG Drawing Text)

这里有几个简单的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,

尝试将svg文本附加到现有的svg元素(Trying to append a svg text to existing svg element)

正如Sasidhar指出的那样,您的代码是将文本元素添加到多边形元素,该元素不是文本元素的有效父元素。 您需要将文本元素添加到svg元素。 在添加文本元素的代码中,变量clickedEle是一个面元素,变量hex是svg元素。 更改... clickedEle.appendChild(btnText); 至... hex.appendChild(btnText); As Sasidhar pointed out, your code is adding the text element to

SVG中心文本(SVG center text)

如果您不打算为文本提供x / y值,您必须将原点绘制在原点的中心。 我大致将宽度/高度除以2,并将其作为负数以显示以下。 <svg height="500" width="500" viewBox="-70 -48 500 500"> <g id="avg-items"> <rect ry="12.284702" rx="14.016526" x = "-70" y = "-48" heigh

相关文章

更多

最近更新

更多