SVG 文本元素不可见

Question

Basically I want to map SVG canvas to -1..1 and print some text on the canvas.

The simple example without mapping requested, is:

 <style>.text {font: 14pt sans-serif; fill: red;} </style>

 <svg class="text" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <text x="0" y="14pt">TEXT</text> </svg>

What i want is this code to display a text:

 <style>.text {font: 14pt sans-serif; fill: red;} </style>

 <svg class="text" viewBox="-1 -1 2 2" xmlns="http://www.w3.org/2000/svg"> <text x="0" y="0">TEXT</text> </svg>

As I had understand from MDN , the center of the canvas will be at 0,0. I expect the text string to be printed at the center(above the zero point actually). I am definitely missing something with this problem. Can you help me?

Answer 1

As I've commented: your font is too big: 14pt vs the size of the svg canvas: width:2, height:2. In order to understand what happens I've centred the svg canvas in the middle of the window (little square with a silver border) and added overflow:visible; so that you can see the text.

 .text {font: 14pt sans-serif; fill: red;} svg{ border:1px solid silver; width:25px; height:25px; display:block; margin:auto; position:absolute; left:0;right:0;top:0;bottom:0; overflow:visible; }

 <svg class="text" viewBox="-1 -1 2 2" xmlns="http://www.w3.org/2000/svg"> <text x="0" y="0">TEXT</text> </svg>

The solution to your problem is to set a bigger viewBox and a smaller font size. You may be tempted to use a very small font size for the viewBox you have (-1 -1 2 2). Please read this article: The Limits of Numbers in SVG

Answer 2

Set the position of the text to the center of the element:

1. You can use, x="50%" y ="50%".
2. Use the text-anchor property to center the text horizontally with the value middle. Here is a simple demo:

 <svg width="200" height="100"> <rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="3px" fill="white"/> <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text> </svg>