FAQ Database Discussion Community


how to make svg responsive

html,css,svg,responsive-design
I'm trying to make this massive svg responsive. However, it's not working and I don't know why. I tried the following: - setting width: 100% height: auto (the diagram disappeared as soon as I removed the set width/height in pixel, regardless what i put back) - using the viewbox attribute...

Hide overflow for inner g element inside svg element

html,css,svg
I have following SVG structure <svg class="ps-chart-svg" width="100%" viewBox="0 0 1039 792.4571428571428" preserveAspectRatio="xMidYMid"> <g transform="translate(0,0)"> <g class="focus" style="overflow:hidden" transform="translate(45,30)"> <path class="line" d="..." fill="none" stroke="black"></path> </g> </g> </svg> What I would like to do is to clip/hide any overflow which is happening due to path element inside parent g element with...

Svg how to position elements lo left and right like with floats?

javascript,svg,d3.js
I'm building a organizational chart with the help of dagre-d3,js and d3.js. Its svg based so every person in the chart needs to have some kind of a employee card (or call it profile card) This card needs to show the Persons name, his group and have 2 buttons, one...

Dynamic inclusion of javascript in SVG by means of server side filtering inside apache server

javascript,apache,svg,piwik
Years back I wrote some code to automatically include some javascript code inside html pages delivered by an http server. The approach is documented here in a blog entry and in this StackOverflow question. The solution served me well over the last years. The approach in two sentences: for every...

Connecting two rectangles in d3js

javascript,svg,d3.js
I am trying to connect two rectangles with a line in d3. The behaviour should be like this, Let's say we have rectangles A & B. We have to first click a rectangle and when we move the mouse the line has to move with the mouse, When I click...

Pulsating color change on svg image

html,css,svg
I came across this awesome design today: http://codepen.io/tmrDevelops/pen/jPLpLJ I really like the pulsating color change. On my website I have an .svg logo that I would like to change color like that when I hover over the image. I would like the actual svg to change color, not the background...

Snap SVG .animate callback fires immediately

javascript,jquery,animation,svg,snap.svg
I am trying to pass a set of arguments to an animate function within Snap SVG including a callback function. However, the callback (in this case is to remove the element) fires immediately on click and not after the animation has completed. As it is now, the element is removed...

SVG data image not working on Firefox

css,image,firefox,svg,data
I'm setting a SVG as background-image for a pseudo element: content: ''; position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 12px; background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 620 12" enable-background="new 0 0 620 12" xml:space="preserve"><g><polygon fill="#D11A3C" points="48.8,12 0,12 0,0 54.1,0"/><polygon fill="#952592" points="93.8,12 44,12...

SVG as data URI triggers XML parsing error in Firefox

css,firefox,svg
I made a codepen demo illustrating the problem: codepen.io/acusti/pen/mJmVRy And here’s the error I get if I try to load the svg content in Firefox: XML Parsing Error: unclosed token Location: data:image/svg+xml;utf8,<svg%20viewBox='0%200%20120%20120'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><circle%20cx='45'%20cy='45'%20r='30'%20fill='#555555'></circle></svg> Line Number 1, Column 77: <svg viewBox='0 0 120 120' version='1.1' xmlns='http://www.w3.org/2000/svg'><circle cx='45' cy='45' r='30'...

SVG filter in external file not being applied

html,svg
In a file named gray.svg in my assets directory I have <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <filter id="grayscale"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg> And in my html I have <svg...

my svg polygons fills are not changing color on hover

jquery,css,svg
I have some svg polygons. When you mouse over a polygon, I want to find part of the polygon's id, then change the fill color of all polygons that have that part of the polygon id in their id. But it isn't working. No polygon fill is changing. Anyone know...

javascript node module.exports / require() code on the front-end

javascript,node.js,svg,browserify
I've been looking into using a library such as SVGO to be able to clean user submitted SVG code on the front end. SVGO is a node.js based library which typically works on the back end, so I've been trying to wrap my head around how to go about sending...

How make Wings in SVG move with css3 animations

html5,css3,svg
i have this wings made in SVG, and i want apply the fly effect in the .wing class, but if i try, the animation will not occurs correctly. Animation in the SVG: svg { -webkit-animation:fly 1s linear infinite; } @-webkit-keyframes fly { 50% { -webkit-transform: rotate(20deg); } 100% { -webkit-transform:...

D3 Slider stop event

javascript,jquery,svg,d3.js
I have a D3 range slider in JS. I need to fire an event when sliders stops at a particular pair of points. I have coded like this: d3.select('#slider4').call(d3.slider().axis(d3.svg.axis().ticks(6).tickFormat(function (d).value([0, 1]).on("slide", function (evt, value) { value1 = value[0], value2 = value[1]; loadChart(value1, value2); })); function loadChart(value1, value2) { debugger; var...

SVG simple animations

html,css,animation,svg,polygon
I'm trying to learn how to use SVG elements so I've made simple icon/logo in Illustrator. Then I've used this SVG icon in my example: @import url(http://fonts.googleapis.com/css?family=Lato); body { background-color: #2F2724; font-family: lato, sans-serif; } .main { text-align: center; } .letterS { fill: #fff; font-size: 180px; text-shadow: 0px 2px 2px...

Responsive axis with percentage coordinates

javascript,svg,d3.js,graph,charts
In an attempt to build a responsive scatter graph with d3.js, I'm using %-based coordinates in a 100% x 100% svg element. How can I .call(axis) and get it to layout the axis using % and not px values, so that they always fit the svg and the plotted data?...

Converting from D3js 2.4.4 to 3.5.5

javascript,svg,d3.js
The example runs with D3js 2.4.4: http://mbostock.github.io/d3/talk/20111018/area-gradient.html I would like to make it run with version 3.5.5 The first error I get is TypeError: x is not a function /line 52 .attr("x", x(0)) What should I change? Some progress It looks lik the first problem was that D3.time came from...

Pure CSS3 or SVG animated Doughnut Chart

html,css,css3,svg,charts
I am looking for a pure CSS3 or SVG animated doughnut chart. Need to have the middle circle fill colour the outer circle to be split with a grey and a blue ie: blue 80% complete, grey 20% left remaining. need text in the middle of the circle. I have...

Moving connected rectangles in d3js

javascript,svg,d3.js
I am trying to connect two draggable rectangles in d3js. My requirement is to Have different rectangles ( eg. A, B, C) All the rectangles should be draggable When I click on a rectangle it should start to draw a line (eg. If I click on A first, the line...

d3 preventing drag on specific elements

javascript,svg,d3.js
I am trying to draw few rectangles in d3. I have an array which holds JSON objects of rectangle properties. var rectObj = { id : 'streams', x : 10, y : 10, height : 50, width : 100, drag:'true' }; Some rectangles have draggable='true', while the others have draggable='false'....

Group bar chart data not working as expected

json,svg,d3.js
Have an array set of the type json object. Var data has an array object like: 0: Object letter : A frequency : .08167 1: Object letter : B frequency : .01492 2: Object letter : C frequency : .02780 3: Object letter : A frequency : .06167 4: Object...

Get current rotation in degrees of group in snap.svg

svg,rotation,snap.svg
how do i get the current rotation in degrees of a element in snap.svg? I can set a tranform but i find no easy way of getting a value. A typical group looks like this. <g transform="matrix(0.5154,0.5154,-0.5154,0.5154,64.3512,5.239)"><text x="0" y="0" style="font-size: 12px;">Change text</text></g> ...

Change SVG image color using Css or do it manually in SVG file

html,css,svg,background,background-color
I have a svg picture file, but the content inside is black, and I need a white, I tried to add background-color property to style attribute of svg file, but Image still black, I trying to find solution in Internet, and I found, but I cant use jQuery or some...

svg, color group child elements

javascript,css,svg
I created a SVG out of illustrator. The elements have the fill on the paths. I am trying to change the color based on the group id that the path is in. I would like to change all child elements fill colors in the same group to the same color...

Creating a 'New' spiky label with 24 or above point burst

jquery,html,css,svg,css-shapes
I am trying to make a point burst thing like the image below: Currently, I have tried this using pseudo elements, however, I was only able to generate a 12 point burst and does not reflect that which is displayed within the image. Is there anyway to create a point...

SVG linearGradient DOM changes only working on Chrome

jquery,svg
I am trying to change the colors of an svg linearGradient using jquery but my code only works on Chrome. Can any one help me out here to make it cross browser? $(document).ready(function() { $(".input-holder:first .form-control").focusout(function(e) { var colorValue = $(this).val(); var s = "#" + colorValue; var patt =...

How can I nest GeoJSON / TopoJSON geometries OR nest the generated paths with D3?

javascript,svg,d3.js,geojson,topojson
Problem: I'm attempting to create an interactive map of the US in which state, county and national boundaries are displayed. Counties are shaded based on data, and hovering over a state should highlight all counties in the state, and the state should be clickable. I want to achieve this by...

Why won't my webGl page load a second time after a refresh?

javascript,html,svg
This is a JS page my friend and I are making. http://jmecom.github.io/GameUniverse/ The page loads fine when you first open it in a tab (albeit a little slow), but when you refresh the tab, the WebGl canvas will just be completely blank. The HTML elements are displayed though. We're using...

d3.js grid moving around when dragging and zooming

javascript,svg,d3.js,gridlines
I tried to copy the behavior of the grid displayed here. The code I have is here Problem is, when I'm dragging or zooming, the grid is moving along with everything else, while it should not. I suspect the problem is around this part : function zoomed() { svg.select(".x.axis").call(xAxis); svg.select(".y.axis").call(yAxis);...

How can I save my generated svg code to a .svg file in the client machine?

javascript,svg,snap.svg
I used snap.svg library to generate, with javascript, a svg element in my asp.net web form page by loading other external .svg files and manipulating them in order to get the final svg element. Once the composition of the desired svg object is finish and the resulting svg element shows...

Svg brush as slider. How to set slider scale graduation frequency

javascript,svg,d3.js
In http://bl.ocks.org/mbostock/6452972#index.html slider example there seems to be no explicit assignment for scale graduation frequency. What if I want to graduete that scale by 10 and not by 20. How can I achieve that? At the moment graduation is like: 0 20 40 etc. I want: 0 10 20 etc....

Center Aligning an SVG element?

svg,path
I don't know how to really explain this but how can I center align this logo http://jsfiddle.net/fa7w3h99/3/ I have tried the following but it didnt seem to work as intended. .center-logo { display: block; margin: auto; } ...

How can i collect 4 small triangle shapes to make a big triangle?

javascript,jquery,html,css,svg
I want to make a image background triangle that made by gathering 4small triangles,like this image How can i make this collection of triangle image background shapes?! .block { width: 0; height: 0; border: solid 20px; float: left; } .clear { clear: both; } .top { margin-left: 38px; } .top...

d3.json response inside wrong callback variable

javascript,svg,d3.js
I'm trying to create a little application in PHP for a website. For this application i use neo4j community database. I'm trying to create nice looking navigation with a graph. The problem is not the styling but to get the graph running. Right now i get the output of neoclient...

Javascript D3.js drag a chart out of its svg Element

javascript,svg,d3.js
I want to make chart, that you can not drag out of its svg element. I'm doing this at the moment like this jsfiddle As you can see, you can zoom and drag this freely. What i want is this: If you drag it for example to the right and...

HTML: Base64 image displaying/copying with wrong height

javascript,html,css,image,svg
So, basically I have a simple base64 image like this: http://jsfiddle.net/rm5c8o1t My problem is that it only displays the upper half of it. If I simply add this to the img tag: style="height: 300px;" it will display as I want it too. The issue now is when I try to...

d3.js animate line drawing happens in opposite direction as expected

javascript,svg,d3.js
I have a simple line graph in d3.js and that I wish to animate the drawing of the line. Fiddle: here. The animation aspect works, but I'd like the line to be drawn from the left to right, instead of right to left as in the fiddle. Why is the...

How to prevent overflowing flexbox without giving explicit sizes

html,css,svg,flexbox
At a certain browser size ratio, this codepen looks like the image below. At wider browser widths, the svg (vertical green lines with text "Top" and "Bottom") on the right overflows its flexbox off the top and bottom. I've tried various permutations of width/height: auto/100%/min-content on the various flex items,...

How do I load SVGs directly in my React component using webpack?

svg,icons,reactjs,loader,webpack
I would like to render a material design icon directly in my NextButton component using webpack. Here's the relevant part of my code: var NextIcon = require('material-design-icons/navigation/svg/production/ic_chevron_right_18px.svg'); var NextButton = React.createClass({ render: function() { return ( <Link to={this.props.target} className='button--next'> {this.props.label} {NextIcon} </Link> ) } }); But this isn't working as...

How can I display greek letters in D3 svg.text objects?

javascript,svg,d3.js
I am using D3 and want to add the greek letter delta. This is in the tag of my HTML: <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> This is where the problem lies: 'bars' is a variable that stores a selection of class '.bar' and...

Displaying Dynamic Circle in html page using SVG

javascript,html,svg
The below code is a simple form that accepts a number from the user and dispalys a circle of the radius entered in the form. Everything is working fine except that the circle vanishes as soon as I click on the submit button. How to fix this? I want the...

D3 Arc Diagram: Tooltip on Circle Mouseover Not Displaying

javascript,svg,d3.js,tooltip,arc-diagram
I'm stuck on a problem and just looking for another pair of eyes to maybe spot what I'm missing. I have an arc diagram I'm building and would like a tooltip event when I mouse over the circles/nodes. You can see the sample bl.ock here. I thought for this to...

How can I scale only part of svg

javascript,svg
I have svg with 2 parts: ____________ | | | | p1 | p2 | |____|______| How can I save p1 width and scale only p2 width on horizontal scale? Please suggest me where can I get know about it. Thank you!...

Setting id and class with the haskell diagrams package

haskell,svg,haskell-diagrams
I am working with the diagrams package for haskell, and I am using the SVG backend. I embed the SVG markup directly into an HTML document, so that the graph as a part of a web page. I have built a pretty cool looking bar graph, and I would like...

Highmaps Group Countries and Hover, Follow link on Click

svg,maps,highmaps
As the topic states, I would like to group countries to create my own "areas". It works nearly, but I don't know whats wrong. Here is my map: http://jsfiddle.net/wiesson/oktajn6e It is mostly derived from the examples, but it does not work. If I set "allAreas" to false, it is okay...

html2canvas does not print jsPlumb Connectors

svg,jsplumb,html2canvas
How to print SVG elements that are built by jsPlumb. Known that getting all SVG Elements drawen by jsPlumb is retrieved by this code : var uiJsPlumbConnectors=jsPlumb.getAllConnections().map(function(conn){return conn.canvas;}) All connectors are SVG elements : Using html2canvas to print all connectors (SVG), it does not work : html2canvas(uiJsPlumbConnectors).then(function(c){ window.open(c.toDataURL('image/png')) }); An...

SVG, D3: Understanding stop offset attribute

javascript,svg,d3.js,linear-gradients
I was trying to understand the offset attribute of 'stop' svg element but couldn't get my head around it. Here's the code: var vis = d3.select(scalecontainer) .append("svg") .attr('height', 30) var gradient = vis.append("linearGradient") .attr("y1", 0) .attr("y2", 0) .attr("x1", "0%") .attr("x2", "100%") .attr("id", "gradient") .attr("gradientUnits", "userSpaceOnUse") gradient .append("stop") .attr("offset", "0%") .attr("stop-color",...

How to test interactivity of React component using D3 select()?

javascript,svg,d3.js,reactjs
I have a React visualization component (Using SVG) that displays a tooltip on mouseOver, using the d3.select() function to modify a class on the tooltip element so that it becomes visible (And invisible on mouseOut): _handleMouseOverEvent: function() { d3.select('#' + this.props.caption).classed('hidden', false); d3.select('#' + this.props.caption).classed('visible', true); } _handleMouseOutEvent: function() {...

adding link_to with image_tag and image path both

html,ruby-on-rails,image,ruby-on-rails-4,svg
I am trying to replace the tag with link_to in my rails application view. for replacing I have svg icon, text and link all in one tag. Here is below <a class="navbar-brand" href="index.html"><%= image_tag 'logo.svg', "data-svg-fallback" => image_path('logo.svg'), :align=> "left" ,:style => "padding-right: 5px;" %> My Project </a> but I...

Get SVG-Object_s at given coordinates?

svg,coordinates
I'd like to obtain object IDs from an SVG-file via coordinates. For example in <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" height="50" width="50"> <rect id="rectRED" x="15" y="5" height="30" width="30" style="fill:#ff0000;fill-opacity:0.5;stroke:#000000;stroke-width:1.5" /> <rect id="rectBLUE" x="5" y="15" height="30" width="30" style="fill:#0000ff;fill-opacity:0.5;stroke:#000000;stroke-width:1.5" />...

Snap.load() callback function triggered too late in Safari

javascript,svg,safari,snap.svg
PROBLEM In my code MySymbolsObject.js - code reported inline just for example purposes - set a window.onload event in order to Snap.load() a svg file and save the svg fragment node in Symbols.resources The last inline <script> set a second window.onload event containing code that uses the svg node saved...

Drawing SVG images with an array of images.

javascript,svg,d3.js
I have an array with names of images, I want to crate an svg canvas and position them in correct rows and columns so that it will not overlap. Here is my code for that. <script type="text/javascript"> var imagesObjects = ["1.png","2.png","3.png","4.png","6.png","3.png","4.png","6.png","1.png","2.png","3.png","4.png","6.png","1.png","2.png"]; var iconsArea = d3.select("#icons").data(imagesObjects) .enter() .append("svg:image") .attr("xlink:href", function(d){ console.log(d);...

z-index not working with my animation

html,css,svg,z-index
The following code (html & css) drives me crazy... jsfiddle link How can I use z-index (or anything else) to have the 3 circles always visibles. With the blue one it's ok, but the yelow and the red one hide the circle on their left. Thanks in advance for you...

Animate dots or points from an offset to their actual position

jquery,html,css,html5,svg
How can I do the animation by using SVG or CSS? Animation should be like below: Initially, only lines will be visible(picture 1), after 2 seconds dots (.) will come and join to the line curves(picture 2) with some animation to the dots. Online Example Please check the code below...

Snap SVG Iterate over Object to build Animate properties

javascript,svg,snap.svg
I'm looking to write a function involving Snap SVG that would allow me to pass in an object or array of values through which I can iterate to build the animation properties. For example, if I could pass: [transform: 't100,100', transform: 'r10,10,10'] Into this: animateElementWithSnap: function(element, parentSVG, animationValues, duration, easing)...

Get Angular to action ng-if in new elements generated by d3.js

javascript,angularjs,svg,d3.js,angularjs-directive
I am generating a series of <circle ng-if='n'> someScopeFunction()' \> with d3.js How can I get Angular to notice and work on these new elements and ng-ifs? And how can I get it to do so with angular variables, e.g. <circle some-attr='{{i - 2}}' />...

Change an inline SVG's x and y with ecmascript

javascript,css,svg
I am using an inline SVG in an SVG and have set some default x and y values. When I change them, the inline SVG moves accordingly. I am trying to change it with var inlineSVG = document.getElementById("inlineSVG"); inlineSVG.style.x = "90"; and that adds style="x:90px;" but that doesn't actually affect...

Trying to fill a SVG map from wordpress custom categories

wordpress,dictionary,svg
I've created a custom post_type (destinations) with a category (locations) to provide a tree structure for my SVG map: Continent/Country/Town Example locations: Europe/Germany/Berlin/POST Europe/Italiy/Sicily/POST North-Africa/Morocco/Marrakech/POST My plan was to fill the map by the country short codes like (DE for Germany, IT for Italia, LY for Libya (...). Here is...

Creating a responsive cloud shape

html,css,css3,svg,css-shapes
I've been trying to create a responsive cloud shape in CSS for a project. I am trying not to do this with images due to HTTP requests and the requirement for responsiveness. The shape in question would be this: (but can be similar - slight variations/improvements would be cool): I...

Create a picture frame type border

html,css,canvas,svg,css-shapes
I am trying to create a page that is contained in what can be visualized as a picture frame type border/frame as shown here: So far I've found three ways to do it none of which truly fit my needs, I need this frame to be responsive so that it...

Circular timer sgv html js css, when making it bigger, the lines don't match up to the size

javascript,html,css,svg,timer
I have a circular timer done with js, css and html using svg. When i make the timer bigger, the lines don't match up with the timer so there is always a gap in the circular timer. How do i make the line that is drawn bigger to complete a...

Handling of character references in an embedded SVG's script tags

javascript,html,svg,xss
This is a xss script: <svg><script>&#x61;&#x6c;&#x65;&#x72;&#x74;&#x28;&#x31;&#x29;</script></svg> The code between <script> tags will be translated to alert(1) by the browser and executed. But if I don't use a <svg> tag the code won't be translated to script. Can anyone tell me why this happens? How does <svg> tag work?...

SVG link is present but not being link-i-fied

svg,hyperlink
Can anyone tell me why my SVG link is not being linkified? The tag is present, and wrapping the text node but just not having any effect. The snippet of SVG is: <a xlink:href="http://www.abcharts.net"> <text x="600" y="250" fill="black" text-anchor="end" style="font-family: Arial; font-size: 8pt">abcharts.net</text> </a> And if you wish you can...

Resizing SVG animation while keeping it centered in its container

css,svg,snap.svg
I'm trying to center the <path> animation horizontally and vertically (after having scaled it down with transform="scale(0.5)) while keeping the <svg> at 100% width and height of its container. I'm using Snap.svg. As you can see below, the <svg> is fine but the <path> is all crammed up in the...

Highchart Polar chart multiple background colors to SVG

javascript,jquery,canvas,svg,highcharts
I'm trying to create a Quinn model with the highchart library. With all the samples from highchart and multiple pane segment colors , I could create something thats semi working. But the problem I'm getting is if I try to write the SVG to a canvas (creating a fixed image),...

Generating number circles in SVG - how to centre the text [duplicate]

bash,svg,text-alignment
This question already has an answer here: How to draw a number centered inside a circle with inline svg? 1 answer I have written a script to generate SVG files showing 1 numbers in circles. This is for use in a drawing app as clipart. Here is the script:...

How could simple SVGs take more bytes than PNGs?

svg
We have icons created in Adobe Illustrator that need to be sent over a network connection and rendered at 72x72px, and we have control on both ends over how they're rendered. We need a small file size. They're fairly simple icons, but in SVG form, they're anywhere from 32KB to...

How to manipulate existing group elements with Snap.svg

javascript,svg,snap.svg
We have an existing svg-document in witch we want to replace a group-element with a new one. Is it possible to do with Snap.svg? var oldGroup = Snap.select("[id='" + oldGroupId + "']"); oldGroup.outerSVG(newGroup); //This is what I want to do but outerSVG is readonly ...

SVG Marker on Google Maps Not Appearing

javascript,google-maps,google-maps-api-3,svg
When I copy Google's example code for SVG markers, everything works fine, but when I create my own SVG marker in Inkscape, the icon doesn't appear. var walkIcon = { path: 'm 375.65048,522.72658 c 1.40058,1.33792 3.38088,2.4914 3.58389,4.62022 0.33282,1.7212 1.62154,3.13596 3.271,3.67594 1.03889,0.25403 1.6602,2.07967 0.0883,1.75669 -1.5495,-0.2461 -2.78641,-1.31821 -4.00567,-2.21914 -0.57041,-1.04216 -2.10653,-2.1964 -2.20994,-0.258 -0.60169,1.67286...

Floating ghost CSS animation

css,svg,css-animations
I have created an SVG ghost for my website's logo. I have made a CSS animation so when a user hovers the logo, the ghost starts floating. Everything works okay except that when it is unhovered, the ghost just drops back to it's original position. Is it possible to have...

Determining angles on an SVG path between two lines

javascript,math,svg
I'm trying to make my robot follow a path that is a drawn SVG path on a webpage. To keep it simple, assume that the SVG Is like so: <svg xmlns="http://www.w3.org/2000/svg"> <path id="path" d="M 100 100 L 300 300 L 100 500 z"> </svg> Which makes a triangle. The robot...

How to slow down SVG stroke dashoffset and stroke dashoffset line animation

css,svg
Hi how do slow I down SVG stroke dashoffset and stroke dashoffset line animation? I would like to have the lines draw at a slower pace. Codepen is here .st0{ fill:none; stroke:#231F20; stroke-width:3; } .st2{ fill:none; stroke:#231F20; stroke-miterlimit:10; stroke-width:3; } .st0,.st2 { stroke-dasharray: 958; stroke-dashoffset: 958; animation: dash 2s 5s...

SVG animation not repeating properly

svg,svg-animate,smil
I am having some difficulty getting my SVG icons to repeat properly. I need them to repeat like a gif, individually and indefinitely. I can get only two to work but I need all three to repeat one after the other. Here is a js fiddle of the SVG animation...

How to achieve “flying Arcs” as link in the force layout of D3.js

svg,d3.js
Please suggest how to achieve the flying arcs in the force layout of d3.JS. As in the image

How to draw a marker in middle of path?

html,css,svg
I have a path (which is essentially a line). I am able to draw an arrowhead with the help of marker-end attribute of path. But now I want to make a + sign in the middle of the path. I think for that purpose, marker-mid should be used. Here is...

Creating SVG elements dynamically

javascript,svg,d3.js
I am trying to create some circles in d3js dynamically, But for some reason it fails. My requirement is to show two small circles on the rectangle when I hover the rectangle. on the mouse out event circles should hide. I tried to it by creating a rect object and...

Cyrllic characters in SVG font

javascript,svg,unicode,encoding,fonts
You will have to bear with me with this, as I know very little about encodings so may be asking something very simple/obvious. I am working with some SVG fonts in browser-side Javascript and I need to pull out some information on Cyrillic characters grammatically. I am doing this currently...

SVG: CSS properties are not applied

css,svg
I have a HTML 5 file containing a SVG element. Also there are some styles defined in a CSS file (imported in the html file correctly), e.g.: rect.cell-border { stroke: #000; stroke-width:1.3px; } One element in the SVG looks like this: <rect class="cell cell-border" width="256" height="256" style="fill-opacity: 0.5;"></rect> Problem: Besides...

Chromium SVG image Nesting

jquery,image,google-chrome,svg,chromium
I am trying to append some image tags to an SVG element. In Firefox(38.0) it works fine, but in Chromium (Version 41.0.2272.76 Ubuntu 15.04 (64-bit)) it nests the elements, causing them not to work. function append_image(x, y, img) { var image = $('<image></image>'); image.attr('height', '60px'); image.attr('width', '54px'); image.attr('x', x); image.attr('y',...

how to define html5 svg polygon points to create graphics

html,html5,svg
Hi i am trying to find out how to define the points for a polygon in HTML5 <svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg> this will end up creating a Star image. i tried to remove some points and add some arbitrary points and it...

worklight server preview wont show png resources anymore after configuring it to serve svg

svg,png,worklight
I ran in the problem where svg images were not loading using WorkLight preview. I found the solution for that here: How can I configure Worklight to serve *.svg files with contentType=image/xml+svg? After adding these lines <mimeTypes> <type>svg=image/svg+xml</type> </mimeTypes> svg files appeared on preview, but now i can't load png...

How do I offset an element based on my mouse position?

jquery,css,svg,jquery-animate,offset
I've got a grid of several <rect> elements inside an SVG. I'm trying to offset the elements based on the position of my mouse. So when my mouse is within a certain range of the element, the element moves away from my mouse. Items closer to the mouse should move...

How do I create a teardrop in HTML?

html,css,css3,svg,css-shapes
How do I create a shape like this to display on a webpage? I don't want to use images since they would get blurry on scaling I tried with 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%;...

Generate Arabic alphabet to SVG

bash,svg,arabic
I created letters based on ASCII codes in SVG. Each character in a separate file. This is for use as clipart in a drawing app. The following is an example of a script I used to generate the SVG: cat <<EOF > f.svg <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"...

JavaFX: How to resize button containing svg image

java,svg,javafx,resize
I want to place a svg image inside a button, and then I want to be able to resize the button to any size. First, this is how I've done the loading and placing of the svg image inside the button: SVGPath svg = new SVGPath(); svg.setContent("M87.5,50.002C87.5,29.293,70.712,12.5,50,12.5c-20.712,0-37.5,16.793-37.5,37.502C12.5,70.712,29.288,87.5,50,87.5 c6.668,0,12.918-1.756,18.342-4.809c0.61-0.22,1.049-0.799,1.049-1.486c0-0.622-0.361-1.153-0.882-1.413l0.003-0.004l-6.529-4.002...

Scale animation on polygon

jquery,svg,polygon
I have a <polygon> that i want to do an scale effect on mouseover, returning to the original size on mouse out, and with a smooth animation, any idea of how can i do that? Y tried with jQuery, changing the class of the <polygon> but nothing works The last...

D3js Bind path `d` attribute to data

javascript,svg,d3.js
I'm trying to find the proper way to dynamically generate a path. I'm following DashingD3js' pattern for creating SVG Paths with D3js. My question is, apart from checking each index in the accessor function and manipulating the value, and apart from creating variables that represent specific points that I want...

Equivalent of canvas quadraticCurveTo in SVG

javascript,jquery,canvas,svg,bezier-curve
I am working on a plugin to allow "natural looking" signatures to be drawn using mouse or touch. When confirmed by the user, the result will be a stored SVG that can then be displayed in place of the "Click to sign" button. The attached JSFiddle http://jsfiddle.net/TrueBlueAussie/67haj4nt/3/ shows a testbed...

Creating arrow-headed background divs

html,css,svg
How can I create this with CSS: I've tried using ::after and ::before, each with transform: skew(20deg) or skew -20deg, but it'll only work if the subtitle fits on one line, and there's no guarantee of that. Having trouble, could really use a pointer or two. I'm trying to support...

Double arc shape with CSS jquery or javascript

javascript,jquery,css3,svg,css-shapes
How can I create an arc shape like this: With CSS or jquery or javascript...

SVG Paths and the Catmull-Rom algorithm

svg,computational-geometry,curve-fitting,catmull-rom-curve
I am experimenting with creating high-performance, good-looking pencil tools using SVG paths. I am logging the mouse coordinates to draw a path. To get a high-fidelity path (accurate to the user's movements) I need to log a point for every pixel movement. This has a big disadvantage. It creates a...

enyo framework to integrate which raphael

javascript,svg,raphael,enyo
I'm trying to integrate Raphael with enyo.js to create SVG component using Raphael instead of through enyo so i can use some of the Raphael functionality. I would like to replace the div that is rendered by default with it child component svg, i have created below jsfiddle. Can anyone...

Can't append element to SVG path

javascript,svg
I'm attempting to animate certain paths in an SVG file, but I can't seem to append the necessary <animateTransform> tag as a child of these paths. Here's my code: currentState.addEventListener("click", function(event) { var i = 0; var map_anim = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'animateTransform'); map_anim.setAttributeNS(null, 'attributeName', 'transform'); map_anim.setAttributeNS(null, 'attributeType', 'XML'); map_anim.setAttributeNS(null, 'type', 'scale');...

SVG - Mutiple images with different behaviors

html,css,svg
I'm trying to build a graphic and here's the idea: I'd have one image representing when the graphic is empty and the othe one when it's filled. So I'd have one image 100% width and the other 20%, 50% and so on the problem is I don't know how to...

Setting width and height of svg in Polymer element

svg,polymer
This is probably just some stupid mistake I'm making, but I'm not able to identify the cause of the problem. I'm creating a Polymer element containing a SVG element. I have tried several ways to set the width and height of the svg element, but all my efforts seem to...

Toggle Class based on ID on hover with other elements

javascript,jquery,svg
so I have a table with a svg floor plan for a building and I would like to have it when the user hovers over one of the table rows the corresponding floor(polygon) in my svg diagram is highlighted via css with a toggling of the class. I am able...

SVG styling issue occurs second time onwards : chrome only

javascript,google-chrome,dom,svg
This is a weird issue. I am having a SVG on my page function addClone() { //loadXMLDoc(); var svg = document.getElementById("svg"); var selected = document.getElementById("ID_obj8e530fe7-9e8b-474e-a48b-9c26418b84a6"); var targetElement = selected.cloneNode(true); var namespace = "http://www.w3.org/2000/svg"; var dummySvg = document.createElementNS(namespace, "svg"); dummySvg.appendChild(targetElement); svg.appendChild(dummySvg); //Doing my stuff here with newly appended dummy element. debugger;...

d3.js place holder graphic when dragging the SVG element

javascript,svg,d3.js
I am creating a visual composer for a query language. I have 3 different SVG rect elements (say A->Operators, B->Some_Objects, C->Drawing Canvas). I want to drag elements from A, B to C. If the user drag the element from A/B to C, the same element should be drawn in C...

Svg set new coordinates with animation on 2 lines simultaneously

jquery,html,css,css3,svg
I need a way (with CSS3 or jQuery) to change this SVG shape from X to ↓ (Down arrow). I tried more ways but i still have problems. My basic idea is to get lines with id (svg_5, svg_6) and make these the head of my arrow. $('a').click(function (e) {...

Can I to make svg icon using data-uri with built-in data for the properties of the background?

svg,data-uri
I want it to look like the result of this code: html { font-size: 16px; } .ico { display: inline-block; } .ico_size_s { width: 1.3rem; height: 1.3rem; } .ico_size_m { width: 2rem; height: 2rem; } .ico_first { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLjUxMi40NTMgNS40NzUgMTIuNDc4IDEuNzA4IDguMjguNjY3IDkuNjA1IDUuNjAzIDE1LjA2IDE0LjcyMiAxLjYxM3oiLz48L3N2Zz4K); background-color: yellow; } .ico_last { background-image:...