14
Esta solución no sé si te va a gustar porque es un poco hacky y no usa los comandos normales de Google Chart o los timelines (los usa pero para calcular valores secundarios que se usarán luego).
La idea es la siguiente:
Poner el timeline en un contenedor
Crear una barra dentro de ese contenedor
Crear un evento cuando se mueve el ratón encima del ...
respondida el 4 dic. 17 a las 19:42
13
También podrías resolverlo usando:
stroke-dasharray: que nos permite especificar el largo del guion.
stroke-dashoffset: que nos permite especificar cuanto restar al largo del guion.
transition: que nos permite definir la transición entre dos estados de un elemento.
transform: que nos permite usando rotate, girar el circulo y posicionar el inicio de la barra ...
respondida el 9 feb. 17 a las 14:16
Marcos
26.3k66 medallas de oro2424 medallas de plata5858 medallas de bronce
13
Lo primero, un poco de trigonometría (cortesía de Paul Dixon): para obtener el punto dentro de una circunferencia a partir de cierto ángulo, debes aplicar la siguiente fórmula:
x = cx + r * cos(a)
y = cy + r * sin(a)
en el que cx y cy son las coordenadas del centro del círculo, r es el radio, y a es el ángulo que quieres expresado en radianes. Eso lo vamos ...
respondida el 8 feb. 17 a las 7:02
8
Como ya te dije en mi comentario, habría necesitado tus imágenes sin deformar. Cogí algo parecido del internet. Para las olas utilizo dos elementos canvas.
En el HTML tengo un elemento #Hamburg, dentro de cual hay todas las caras de un paralelogramo. Si no te gusta la orientación, por favor cambia esta línea de código: transform: rotateY(-45deg) rotateX(-...
respondida el 2 nov. 18 a las 16:40
enxaneta
3,49422 medallas de oro88 medallas de plata1919 medallas de bronce
6
Usando SVG es muy simple, sólo que tendrás que cambiar algunas de las cosas que estás usando:
En lugar de circle debes usar rect para dibujar rectángulos/cuadrados, y ponerle los atributos rx y ry para redondear los bordes (funcionarán como un border-radius).
El orden importa: debes ver qué elementos están por encima de qué otros y reordenar siguiendo esa ...
respondida el 12 dic. 16 a las 17:57
6
En efecto, android studio acepta imagenes vectoriales de forma nativa pero tiene limitantes. En este caso, el codigo
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="532" height="532" viewBox="0 0 512 512">
<circle cx="255" cy="255" r="230" fill="#304ffe" />
<text x="255" y="246" alignment-...
respondida el 14 feb. 18 a las 15:01
Jhon Fredy Trujillo Ortega
56644 medallas de plata1212 medallas de bronce
5
Usando la formula general para calcular los puntos de cada vértice, en R sería:
N <- 6 # Cantidad de lados
n <- 1:N # Vértices
r <- 1 # radio (tamaño del polígono)
theta <- 0 # Angulo de inclinación
centro <- 0 # Coordenadas del centro
x = r * cos(2*pi*n/N + theta) + centro
y = r * sin(2*pi*n/N + theta) + centro
plot(x, y,...
respondida el 17 ene. 19 a las 16:38
Patricio Moracho
45.2k1111 medallas de oro3131 medallas de plata6060 medallas de bronce
4
Lo que sucede es que estás intentando deformar la imagen, es decir cambiar el aspecto. Si lo que necesitas es ocupar todo el área simplemente debes proporcionar el valor none al atributo preserveAspectRatio de la marca svg para indicar que quieres modificar la proporción:
<svg ... preserveAspectRatio="none">
Sólo eso necesitas para resolver el ...
4
Estás muy cerca, para no modificar tu SVG agrégale el infortunado !important para que sobreescriba el estilo inline:
#rect3336 {
fill:#ff0000 !important;
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="epa.css"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="...
respondida el 22 ago. 16 a las 19:17
Shaz
28.1k1818 medallas de oro3636 medallas de plata5858 medallas de bronce
4
Una vez que tienes el SVG como imagen de fondo, ya no importa que sea SVG, PNG, GIF o JPG: puedes animar sus propiedades como las de cualquier otro elemento/propiedad CSS usando animaciones y @keyframes.
En un comentario pones que lo que quieres es mover un objeto SVG de un lado al otro de la pantalla, eso lo puedes hacer con una animación sencilla que ...
respondida el 21 dic. 16 a las 21:08
4
Haciendo uso del elemento Text tomando en cuenta la posición en X y en Y
<text x="90" y="130" font-family="sans-serif" font-size="20px" fill="blue"
id="texto"></text>
Desde Javascript puede asignar un nuevo valor mediante textContent
function circlePath(cx, cy, r, percentil){
var coordx = cx + r * Math.cos( 2 * Math.PI * ...
respondida el 20 abr. 17 a las 4:07
Dev. Joel
22.8k33 medallas de oro2424 medallas de plata4444 medallas de bronce
4
Aquí te dejo un ejemplo de cómo se podría hacerse teniendo el texto dentro de la propia imagen SVG:
Añade el texto en un <text>. Lo he colocado al final de todos los elementos para que al quede encima de todo, y además lo he posicionado en el centro de la imagen, aunque puedes ponerlo donde quieras.
Usando el selector de hermano no adyacente (~) ...
respondida el 8 abr. 19 a las 17:01
4
Opción 1: Animando el atributo SVG - d
Para conseguir una animación de dibujo progresivo, una manera es hacerlo de forma "escalonada", es decir, primero indicamos el punto de origen con todos sus futuros puntos de inflexión. Luego usando animate vamos moviendo uno a uno dichos puntos
Ejemplo:
<svg width="500" height="250">
<path ...
respondida el 2 dic. 19 a las 21:26
Marcos
26.3k66 medallas de oro2424 medallas de plata5858 medallas de bronce
3
Sé que al final lo pusiste con SVG (que personalmente prefiero), pero antes de que editaras la pregunta, cree una pequeña versión en HTML+CSS de lo que buscabas. Te lo pongo como alternativa, aunque realmente la opción de SVG es mejor y tiene la ventaja de que escala bien.
La idea sería usar div para hacer los rectángulos y círculos, y los pseudo-elementos :...
respondida el 13 dic. 16 a las 14:33
3
Encontré una posible solución que, en lugar de utilizar la etiqueta img, utiliza la etiqueta use dentro de un svg inline y que funciona como quiero.
Lo que hace la etiqueta use es que toma los nodos de dentro de un SVG y los duplica donde esté la etiqueta. Básicamente es como clonar el contenido del SVG enlazado dentro del SVG que lo enlaza mediante use. Y ...
respondida el 23 nov. 16 a las 0:30
3
Conozco 3 maneras que te pueden servir, aunque la 3 la desaconsejo:
1. El orden de importación de los CSS es importante
Si tienes 2 CSS, el que esté definido más abajo tiene prioridad en sus definiciones siempre y cuándo éstas sean igual de específicas.
Para poner un ejemplo claro y cogiendo tus definiciones:
<link href="http://fonts.googleapis.com/...
respondida el 7 jul. 16 a las 7:31
Miquel Coll
3,16144 medallas de oro1919 medallas de plata4242 medallas de bronce
3
Quedo solucionado, modifiqué el web.xml de mi aplicación agregando el type-mime de imagenes svg, con esto ya se muestran en Mozilla firefox, IE, y Chrome.
<mime-mapping>
<extension>svg</extension>
<mime-type>image/svg+xml</mime-type>
</mime-mapping>
<mime-mapping>
<extension>...
3
A ver si entiendo, quieres que se vea así:
Pero se está viendo así:
Esto pasa por que en el css del tag a le estás dando un heigth en px, déjalo en heigth:auto:
#botones-reserva a{
text-decoration: none;
width: 22%;
height: auto;
margin: 4px 1% 4px 1%;
text-align: center;
position: relative;
display: inline-block;
background-...
3
Para dibujar este tipo de "chart" en SVG necesitas utilizar la propiedad stroke-dasharray.
// calcula el perimetro del circulo #test
let perimetro = 50 * 2 * Math.PI;
let _input = document.querySelector("[type='range']");
_input.addEventListener("input",()=>{
dibujar_chart();
})
window.addEventListener("load",()=>{
...
respondida el 18 oct. 18 a las 15:46
enxaneta
3,49422 medallas de oro88 medallas de plata1919 medallas de bronce
3
1. filter:drop-shadow()
utilizar filter:drop-shadow para aplicar la sombra a una imagen con transparencias
.svgimg{filter:drop-shadow(1px 1px 3px #888)}
<img class="svgimg" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat" />
2. filter:url()
Si quieres utilizar filtros svg puedes crear el filtro (#f) como el del ...
respondida el 22 ago. 19 a las 7:39
enxaneta
3,49422 medallas de oro88 medallas de plata1919 medallas de bronce
3
La propiedad de css stroke-dashoffset define la ubicación a lo largo de la ruta de un svg donde comenzará el guión de un trazo. Cuanto mayor sea el número, más tarde en esa ruta comenzarán los guiones. En el css que está dos veces porque se quiere que al 30% del tiempo de la animación se mantenga la posición y no comience hasta entonces el desplazamiento del ...
respondida el 24 dic. 19 a las 8:01
JorgeGuz
2,08022 medallas de oro66 medallas de plata2222 medallas de bronce
3
Al contrario! Yo solo usaría SVG en casos extremos, pero para tu caso particular (un site responsive) utilizaría imágenes en formato PNG.
Como todo, te encontrarás con usuarios que te dirán justo lo contrario, pero la amplia mayoría usa más PNG que no SVG. Además, es lógico, SVG son imágenes vectoriales calculadas al momento (no son pixeles), con lo que ...
2
Crear archivo .SVG
Estructura base de un icono archivo .svg modificar el <path... con el trazo del icono que quieras
<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="48" height="48">
<path d="M 21 1.90625 L 18.46875 4.4375 C 16.708893 2.9398748 14.471062 2 12 2 C 6.4666667 2 2 6....
respondida el 5 dic. 16 a las 8:52
Webserveis
11k1111 medallas de oro5858 medallas de plata121121 medallas de bronce
2
Puedes probar con el siguiente código:
<svg version="1.1"
baseProfile="basic"
xmlns="http://www.w3.org/2000/svg"
width="120" height="120">
<circle r="60px" fill="red" cx="90" cy="65"></circle>
</svg>
La versión puede ser 1.0, 1.1 ó 1.2 (todo dependerá de las propiedades de cada elemento, si están soportadas o no por ...
2
El problema está al hacer esto:
var vis = d3.select(".dashboard")
.select("#sowing")
.append("div")
.append("svg")
....
La variable vis no contiene un div sino un svg que es el último elemento que se añadió. Entonces el select se está poniendo dentro de un svg y no se muestra, porque los elementos HTML no son ...
respondida el 30 nov. 16 a las 4:28
2
Teniendo en cuenta calidad, rendimiento y velocidad y considerando que tu pregunta se refiere a insertar ICONOS quedan a la cabeza SVG y Fuentes.
Ambas tendrán mayor calidad y mejor rendimiento que imágenes ya que ambas están basadas en vectores.
La decisión depende de la cantidad de iconos diferentes que quieras manejar y del grado de personalización que ...
2
Esto ocurre porque el width y height del svg no influye en el width y height de la figura mostrada , el alto y ancho de la figura se manipula mediante el atributo viewBox, como desea que se obtenga dichas propiedades del div(contenedor) , bastaría con no colocar este atributo viewBox y añadiéndole alto y ancho al rect de 100%
div {
width:400px;
...
respondida el 18 oct. 16 a las 5:13
Dev. Joel
22.8k33 medallas de oro2424 medallas de plata4444 medallas de bronce
2
div#rectangulo {
padding:0;
margin:0;
width:400px;
height:200px;
background:#f0f0f0;
}
div#rectangulo * {
width:100%;
height:100%;
}
<div id="rectangulo">
<svg>
<rect x="0" y="0" rx="10" ry="10" fill="#114477" />
</svg>
</div>
Fíjate en las modificaciones que hice. Tus etiquetas svg ...
2
Las URLs son relativas, por lo tanto cuando llamas al archivo utiliza como base el lugar desde donde la llamas (parece ser que es una plantilla .css) y probablemente no la encuentre donde le indicas.
Una solución recomendable es declarar en la cabecera la URL base en tu html:
<head>
<base href="http://misitio.com/">
</head>
Así podrás ...
2
Tienes razón, solo me funcionaba en (Mac) Safari Release 11 (Safari 9.1.2, WebKit 11603.1.2) pero en Chrome Versión 52.0.2743.116 (64-bit) no.
Creo que la solución es utilizar getAttributeNS, no lo he utilizado nunca pero seguro que la docu te aclara bastante las cosas.
document.querySelector(".button").addEventListener("click", function(event) {
...
Solo están habilitadas las respuestas de wiki más votadas con una longitud mínima y que no pertenecen a la comunidad