Eu gostaria de exibir um <text>
em SVG que iria quebrar a linha automaticamente no contêiner <rect>
da mesma maneira que o texto HTML preenche os <div>
elementos. Existe uma forma de fazer isso? Não quero posicionar as linhas esparsamente usando <tspan>
s.
108
Aqui está uma alternativa:
Observando que, embora o ForeignObject possa ser relatado como sendo compatível com essa sequência de recursos, não há garantia de que o HTML possa ser exibido porque isso não é exigido pela especificação SVG 1.1. Não há sequência de recursos para suporte a objetos html-em-estrangeiro no momento. No entanto, ele ainda é compatível com muitos navegadores, portanto, provavelmente será necessário no futuro, talvez com uma sequência de recursos correspondente.
Observe que o elemento 'textArea' no SVG Tiny 1.2 oferece suporte a todos os recursos svg padrão, por exemplo, preenchimento avançado, etc., e que você pode especificar a largura ou a altura como automática, o que significa que o texto pode fluir livremente nessa direção. ForeignObject atua como janela de exibição de recorte.
Observação: embora o exemplo acima seja um conteúdo SVG 1.1 válido, no SVG 2 o atributo 'requiredFeatures' foi removido, o que significa que o elemento 'switch' tentará renderizar o primeiro elemento 'g' independentemente de ter suporte para SVG 1.2 'textArea 'elementos. Consulte as especificações do elemento switch SVG2 .
fonte
xhtml:div
vez dediv
, mas isso pode ser por causa de d3.js. Não consegui encontrar nenhuma referência útil sobre TextFlow, ele (ainda) existe ou estava apenas em algum rascunho?O textPath pode ser bom para alguns casos.
fonte
Com base no código de @Mike Gledhill, dei um passo adiante e adicionei mais parâmetros. Se você tiver um SVG RECT e quiser que o texto seja quebrado dentro dele, isso pode ser útil:
fonte
boxwidth = parseInt(boxObject.getAttribute('width'))
boxwidth = parseInt(boxObject.getBBox().width)
Essa funcionalidade também pode ser adicionada usando JavaScript. Carto.net tem um exemplo:
http://old.carto.net/papers/svg/textFlow/
Outra coisa que também pode ser útil são áreas de texto editáveis:
http://old.carto.net/papers/svg/gui/textbox/
fonte
O código a seguir está funcionando bem. Execute o trecho de código o que ele faz.
Talvez ele possa ser limpo ou fazê-lo funcionar automaticamente com todas as marcas de texto em SVG.
fonte
Publiquei o seguinte passo a passo para adicionar alguma quebra de linha falsa a um elemento de "texto" SVG aqui:
SVG Word Wrap - Mostrar limitador?
Você só precisa adicionar uma função JavaScript simples, que divide sua string em elementos "tspan" mais curtos. Aqui está um exemplo de sua aparência:
Espero que isto ajude !
fonte