две последовательные линии среднего уровня в svg?

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 

<svg height="140" width="700" style="font-size:100px;font-family:serif"> 
<text x="350" y="75" fill="blue" text-anchor="middle" 
    style="line-height:115%;text-anchor:middle;">BIG LINE</text> 

    <text x="350" y="120" fill="blue" text-anchor="middle" 
     style="text-anchor:middle;font-size:20%">This is a very long line with a lot of text</text> 
</svg>

не центр второй линии в моем зрителе. (Я удвоился на середине, чтобы сделать его лучше!), Как это сделать?две последовательные линии среднего уровня в svg?

Вот родственный, но не тождественны вопрос: могу ли я поместить несколько строк в один текст ?:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 

<svg height="140" width="700" style="font-size:100px;font-family:serif"> 
<text x="350" y="75" fill="blue" text-anchor="middle" 
    style="line-height:115%;text-anchor:middle;">BIG LINE<br/>no</text> 
</svg>

но не может SVG прерывистых линий.

Мое конечное намерение состоит в том, чтобы иметь один центрированный заголовок, за которым следует меньший шрифт, но более длинный центрированный заголовок, который масштабируется внутри моего браузера html, чтобы растянуть ширину страницы. svg, кажется, лучший способ сделать это ... может быть. ПРИМЕЧАНИЕ. Разрыв линии в стороне. Реальная проблема - это центрирование.

источник

2014-02-20 ivo Welch

Я думаю, что если вы удалите BR, он должен работать. – Ian

Нет, это не на моем imageviewer на linux. он должен ... –

<br> не является действительным элементом SVG. Вы не можете произвольно вставлять теги HTML в документ SVG.

Если вам действительно нужно включить HTML, вы можете использовать элемент <foreignObject>.

<svg height="300" width="700" style="font-size:100px;font-family:serif"> 

    <foreignObject x="100" width="500" height="550"> 
     <!-- XHTML content goes here --> 
     <body xmlns="http://www.w3.org/1999/xhtml" 
     style="font-size:100px; line-height:115%; color:blue; text-align: center;"> 
      <p>BIG LINE<br/>no</p> 
     </body> 
    </foreignObject> 

    <text x="350" y="120" fill="blue" text-anchor="middle" 
     style="text-anchor:middle;font-size:20%">This is a very long line with a lot of text</text> 
</svg>

Demo here

источник

2014-02-20 23:26:38

Это не отображает ничего на первой строке для меня на linux 'imageviewer. разрыв линии был в стороне. моя настоящая проблема - это центрирование. –

, но спасибо, что рассказали мне, как исправить PS: часть, с html и перерыв в ней. –

Возможно, из-за того, что используемый вами SVG-рендеринг не поддерживает ''. –

две последовательные линии среднего уровня в svg?

ответ

Смежные вопросы