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.

10
Qual é a diferença entre SVG e HTML5 Canvas?
Quais são as diferenças entre SVG e HTML5 Canvas? Ambos parecem fazer o mesmo comigo. Basicamente, ambos desenham arte vetorial usando pontos de coordenadas. o que estou perdendo? Quais são as principais diferenças entre o SVG e o HTML5 Canvas? Por que devo escolher um em vez do outro?
92 html  canvas  svg 
12
Texto transparente cortado do fundo
Existe alguma maneira de fazer um corte de texto transparente de um efeito de fundo como o da imagem a seguir, com CSS? Seria triste perder todo o SEO precioso por causa das imagens substituindo o texto. Primeiro pensei em sombras, mas não consigo descobrir nada ... A imagem é …
90 css  svg  fonts  css-shapes 
4
Os documentos SVG oferecem suporte a atributos de dados personalizados?
Em HTML5, os elementos podem ter metadados arbitrária armazenadas em atributos XML cujos nomes começam com data-tais como <p data-myid="123456">. Isso também faz parte da especificação SVG? Na prática, essa técnica funciona bem para documentos SVG em muitos lugares. Mas gostaria de saber se faz parte da especificação oficial do …
7
Como se livrar do espaço extra abaixo do svg no elemento div
Aqui está uma ilustração do problema (testado no Firefox e Chrome): <div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div> Executar snippet de códigoOcultar resultadosExpandir snippet Ver no JSFiddle Observe o redespaço extra dentro do divabaixo do azul svg. Já tentei configuração paddinge marginde ambos os elementos para 0, mas sem sorte.
87 html  css  svg 
7
Obter largura / altura do elemento SVG
Qual é a maneira correta de obter as dimensões de um svgelemento? http://jsfiddle.net/langdonx/Xkv3X/ Chrome 28: style x client 300x100 offset 300x100 IE 10: stylex client300x100 offsetundefinedxundefined FireFox 23: "style" "x" "client" "0x0" "offset" "undefinedxundefined" Existem propriedades de largura e altura ativadas svg1, mas .width.baseVal.valuesó são definidas se eu definir os …
85 javascript  svg 
6
Desenhando setas acima do HTML
Eu tenho uma tabela html e quero desenhar uma seta de uma célula para outra célula. Por exemplo, assim: Como isso poderia ser feito? Exemplo de HTML: <html> <body> <table> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td id="end">9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td id="start">0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> </body> </html> Se você redimensionar o navegador, a …
13 javascript  html  svg 
2
Tela inicial do Android VectorDrawable
Quero mostrar um VectorDrawable no meu splash sreen <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@android:color/white" android:gravity="fill" /> <item android:drawable="@drawable/splash_screen" android:gravity="bottom|center" /> </layer-list> Meu SVG tem android:width="320dp"eandroid:height="238dp" <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="320dp" android:height="238dp" android:viewportWidth="320" android:viewportHeight="238"> <group> <clip-path android:pathData="M0,0h320v238h-320z M 0,0"/> <path android:pathData="M0,143.311a160,4.476 0,1 0,320 0a160,4.476 0,1 0,-320 0z" android:fillColor="#E6E6E6"/> <path android:pathData="M245.269,94.815C245.067,94.818 244.865,94.821 244.66,94.821C244.455,94.821 …
2
CSS SVG Várias animações
Eu criei uma animação de mapa do tesouro. Primeiro, ela exibirá o caminho em cinza claro, mas, quando a animação começar, eu gostaria que os traços em cinza claro desaparecessem ou passassem para uma cor preta quando a animação de preenchimento ".road" começar. lutando para fazer com que os traços …
9 css  svg 
2
Como redimensionar a área ClipPath do SVG?
Eu tenho esse código: .img-container { width: 300px; height: 300px; background-color: lightgreen; overflow: hidden; } .clipped-img { clip-path: url('#header-clip-svg'); } <div class="img-container"> <!--clipping SVG--> <svg height="0" width="0"> <defs> <clipPath id="header-clip-svg"> <path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path> </clipPath> </defs> </svg> <!-- clipped image--> <img class="clipped-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3341051/team.jpg"/> </div> Executar snippet de códigoOcultar resultadosExpandir snippet Desejo aumentar …
8 css  svg  clip-path 
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.