متن در SVG
ایجاد متن در SVGبا استفاده از عنصر <text>
با استفاده از عنصر <text> می توانید یک متن را تعریف کنید.
مثال 1
نوشتن یک متن:
کد SVG این مثال، در زیر قرار دارد:
مثال
<svg height="30" width="200">
<text x="0" y="15" fill="red">I love SVG!</text>
</svg>
خودتان امتحان کنید »<text x="0" y="15" fill="red">I love SVG!</text>
</svg>
مثال 2
چرخاندن متن مورد نظر:
کد SVG شکل مورد نظر در زیر قرار دارد:
مثال
<svg height="60" width="200">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>
خودتان امتحان کنید »<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>
مثال 3
با استفاده از عنصر <tspan>، که در داخل عنصر <text> قرار می گیرد، می توان عناصر را مرتب سازی کرد و به زیر گروه هایی، تقسیم کرد. هر عنصر <tspan> می تواند شامل فرمت ها و موقعیت های مختلف باشد.
قرار دادن متن در چند خط( با استفاده از عنصر <tspan>):
کد SVG مثال بالا، در زیر قرار دارد:
مثال
<svg height="90" width="200">
<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>
خودتان امتحان کنید »<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
ایجاد یک متن به صورت لینک( با استفاده از عنصر <a>):
کد SVG در زیر قرار دارد:
مثال
<svg height="30" width="200" 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>
خودتان امتحان کنید »<a xlink:href="http://www.w3schools.com/svg/" target="_blank">
<text x="0" y="15" fill="red">I love SVG!</text>
</a>
</svg>
- نوشته شده توسط احسان عباسی
- بازدید: 4212
