Articles of svg

Modifica un file svg usando jQuery

Ho un file SVG con qualche forma e un po ‘di testo. Mi piacerebbe modificare lo svg in fase di runtime, in modo che alcune forms possano cambiare colore e alcuni testi possano cambiarne il contenuto. Supponiamo di avere solo due elementi in un file svg esterno: circle1: un cerchio blu riempito con quell’ID text1: […]

Animazione trigger SVG con evento

come faccio a triggersre un elemento animato svg per iniziare l’animazione tramite javascript con un evento arbitrario? Sto immaginando qualcosa come begin=”mySpecialEvent” , poi più tardi posso inviare mySpecialEvent e l’animazione inizierà (o ricomincerà se è già stata riprodotta).

Da SVG a Canvas con d3.js

Qualcuno ha provato ad usare una libreria di tipo svg to canvas durante la creazione di visualizzazioni d3.js? Ho provato a usare canvg.js e d3.js per convertire svg su canvas da una webview di applicazioni Android 2.3, ma quando chiamo: svg.selectAll(“.axis”) .data(d3.range(angle.domain()[1])) .enter().append(“g”) .attr(“class”, “axis”) .attr(“transform”, function(d) { return “rotate(” + angle(d) * 180 / […]

SVG angolo arrotondato

Ho il seguente SVG: Voglio ottenere un effetto CSS- border-top-right-radius e border-top-bottom-radius . Come posso ottenere quell’angolo d’angolo arrotondato?

Salva SVG in linea come JPEG / PNG / SVG

Ho un SVG in linea nel mio html e devo essere in grado di salvarlo come JPEG, PNG o SVG. Ho provato diversi metodi per convertire SVG in canvas e poi convertirli in JPEG, ma non sono riuscito a farlo funzionare. Ecco un esempio del mio SVG in linea. .font { color: #ffffff; font-family: Roboto; […]

allineamento verticale dell’elemento di testo in SVG

Diciamo che ho il file SVG: b a Voglio in qualche modo allineare la parte superiore di b . In realtà, desidero che il mio posizionamento sia conforms alla roofline del roofline anziché alla roofline di baseline !

SVG: testo all’interno di rect

Voglio visualizzare del testo all’interno di SVG rect . È ansible? Provai Hello Ma non funziona.

ruota il testo dell’asse x in d3

Sono nuovo di codifica d3 e svg e sto cercando un modo per ruotare il testo su xAxis di un grafico. Il mio problema è che in genere i titoli xAxis sono più lunghi delle barre nel grafico a barre sono larghi. Quindi sto cercando di ruotare il testo per eseguire verticalmente (piuttosto che orizzontalmente) […]

Come posso ottenere png (base64) con immagini all’interno di svg in Google Charts?

Come posso ottenere base64 con l’immagine all’interno di svg? Controlla questo violino che ho ricevuto da un’altra domanda. Se vedi il secondo grafico, non genera l’immagine che si sovrappone alla barra. var chart = new google.visualization.ColumnChart(document.getElementById(‘chart_survey’)); $(“[fill=’#FFFFFF’]”).each(function( index, element ) { var svgimg = document.createElementNS(‘http://www.w3.org/2000/svg’,’image’); svgimg.setAttributeNS(null,’x’,element.x.baseVal.value); svgimg.setAttributeNS(null,’y’,element.y.baseVal.value); svgimg.setAttributeNS(null,’width’,element.width.baseVal.value); svgimg.setAttributeNS(null,’height’,element.height.baseVal.value); svgimg.setAttributeNS(null,’preserveAspectRatio’,’none’); svgimg.setAttributeNS(‘http://www.w3.org/1999/xlink’,’href’, ‘${application.contextPath}/images/textura/patt.gif’); $(element).parent().append(svgimg); }); $(‘#test’).val(chart.getImageURI())

Animazione SMIL SVG deprecata sostituita con effetti di animazione CSS o Web (hover, clic)

In conformità con questo argomento: Problemi di Firefox 38-40 SMIL – molto lenta velocità (risolti in FF versione 41 dal 22.09.15) e questo argomento: Intenzione di deprecare: SMIL Il tag SVG ‘animateTransform’ non funziona bene. Sarebbe bello sostituire SMIL (tag animato) con transizioni CSS o CSS. CONSOLE WARNING: Please use CSS animations or Web animations […]