Perguntas com a marcação «svg»

O Scalable Vector Graphics (SVG) é um formato de gráficos vetoriais bidimensional baseado em XML que também pode ser usado em HTML. Não adicione essa tag apenas porque seu projeto usa SVG. Em vez disso, adicione a tag se sua pergunta é sobre SVG ou está intimamente relacionada a ela, como obter algo com SVG.

14
jQuery SVG vs. Raphael [fechado]
Fechado . Esta questão é baseada em opiniões . No momento, não está aceitando respostas. Deseja melhorar esta pergunta? Atualize a pergunta para que ela possa ser respondida com fatos e citações editando esta postagem . Fechado há 6 anos . Melhore esta pergunta Estou trabalhando em uma interface interativa …
11
Como centralizo um SVG em uma div?
Eu tenho um SVG que estou tentando centralizar em uma div. A div tem uma largura ou 900 px. O SVG tem uma largura de 400px. O SVG tem sua margem esquerda e margem direita ajustada para automático. Não funciona, apenas age como se a margem esquerda fosse 0 (padrão). …
254 css  layout  svg  positioning  margin 
7
Como posso fazer uma escala svg com seu contêiner pai?
Eu quero ter uma escala de conteúdo do elemento svg embutido quando o tamanho não for nativo. É claro que eu poderia tê-lo como um arquivo separado e escalá-lo assim. index.html: <img src="foo.svg" style="width: 100%;" /> foo.svg: <svg width="123" height="456"></svg> No entanto, quero adicionar estilos adicionais ao SVG através do …
236 css  html  svg  scaling 
12
Como crio uma lágrima em HTML?
Como crio uma forma como essa para ser exibida em uma página da web? Eu não quero usar imagens, pois elas ficam embaçadas no dimensionamento Eu tentei com CSS : .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; …
222 html  css  svg  css-shapes 
10
Você pode controlar como a largura do traçado de um SVG é desenhada?
Atualmente construindo um aplicativo SVG baseado em navegador. Dentro deste aplicativo, várias formas podem ser estilizadas e posicionadas pelo usuário, incluindo retângulos. Quando aplico a stroke-widthem um rectelemento SVG , por exemplo 1px, o traçado é aplicado ao rectdeslocamento e inserção do de diferentes maneiras por diferentes navegadores. Isso está …
204 svg  offset  rect 
4
São necessários parâmetros SVG, como 'xmlns' e 'version'?
Em cerca de metade dos exemplos de svg que vejo na internet, o código está envolvido em <svg></svg>tags simples e simples . Na outra metade, as tags svg têm muitos atributos complicados como este: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> Minha pergunta é: está tudo bem em usar as simples tags svg? …
203 xml  svg  tags 
4
Posicionamento SVG
Estou brincando com o SVG e tendo alguns problemas com o posicionamento. Eu tenho uma série de formas que estão contidas na gtag de grupo. Eu esperava usá-lo como um contêiner, para poder definir sua posição x e todos os elementos desse grupo também se moveriam. Mas isso não parece …
203 svg  position  grouping 
7
Como posso remover ou substituir o conteúdo SVG?
Eu tenho um pedaço de código JavaScript que cria (usando D3.js) um svgelemento que contém um gráfico. Quero atualizar o gráfico com base em novos dados provenientes de um serviço da Web usando AJAX, o problema é que cada vez que clico no botão de atualização, ele gera um novo …
200 javascript  ajax  svg  d3.js 
8
Posso alterar a cor de preenchimento de um caminho svg com CSS?
Eu tenho o seguinte código: <span> <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;"> <desc></desc> <defs/> <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/> </svg>  </span> É possível alterar a cor de preenchimento do caminho SVG com CSS ou algum outro meio sem realmente alterá-lo dentro da tag …
200 css  svg 
14
O anexo do jquery não funciona com o elemento svg?
Assumindo isso: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'); }); </script> </head> <body> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px"> </svg> </body> Por que não vejo nada?
199 jquery  html  svg 
13
Como calcular o caminho SVG para um arco (de um círculo)
Dado um círculo centrado em (200.200), raio 25, como faço para desenhar um arco de 270 graus a 135 graus e um arco que varia de 270 a 45 graus? 0 grau significa que está bem no eixo x (o lado direito) (o que significa que é a posição das …
191 svg 
5
SVG: texto dentro de rect
Quero exibir algum texto dentro do SVGrect . É possível? eu tentei <svg xmlns="http://www.w3.org/2000/svg"> <g> <rect x="0" y="0" width="100" height="100" fill="red"> <text x="0" y="10" font-family="Verdana" font-size="55" fill="blue"> Hello </text> </rect> </g> </svg> Mas não funciona.
180 text  svg  rect 
10
Como colocar e centralizar o texto em um retângulo SVG
Eu tenho o seguinte retângulo ... <rect x="0px" y="0px" width="60px" height="20px"/> Eu gostaria de centralizar a palavra "ficção" dentro dela. Para outros retângulos, o svg word wrap fica dentro deles? Não consigo encontrar nada específico sobre a inserção de texto em formas centralizadas na horizontal e na vertical e na …
179 text  svg 
8
Incluir um SVG (hospedado no GitHub) no MarkDown
Sei que uma imagem pode ser colocada em um MD com a sintaxe MD de um ![Alt text](/path/to/img.jpg)ou outro ![Alt text](/path/to/img.jpg "Optional title"), mas estou tendo dificuldade para colocar um SVG no MD, onde o código está hospedado no GitHub. Por fim, usando o rails3 e alterando o modelo com …
173 svg  github  markdown 
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.