Using Angular ng-class with d3.js on svg element

Issue Trying to use angular ng-class with d3js library on an svg element, without luck. HTML <div ng-controller=”MainCtrl”> <div id=”svgContainer”></div> <button id=”swicthBtn” ng-click=”switchStatus();” class=”btn”>Switch status</button> </div> CSS *, *:before, *:after { bounding-box: border-box; } #svgContainer { width: 400px; height: 400px;

Continue reading

Make circle on same image

Issue I am using below image. Now I want to clickable all circle. This is a simple image. Every circle will redirect to different different links. Is this possible? Solution Html image maps may be the fitting tool. Conceptually the

Continue reading

SVG stroke-linecap at one end only

Issue Is it possible to add a linecap to only one end of a stroke? Not both ends as is the default shown in the sample below. <?xml version=”1.0″?> <svg width=”120″ height=”120″ viewBox=”0 0 120 120″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg”> <line stroke-linecap=”butt”

Continue reading

Mask-composite for svg path subtract

Issue I am working with a svg material which contains two paths, one solid green with gap inbetween and one dashed red with no gap inbetween Red Dashed <svg viewBox=”0 0 1200 100″> <path id =’lineNoGap’ d=”M0,80L50,20L100,50L150,30L200,40L250,90L400,20L450,70L500,60″ stroke=”red” fill=”none” stroke-dasharray=”2″

Continue reading

Problems with SVG styling

Issue I have an SVG and i’m trying to do 2 things. I wanted to center it in the .left div, i tried to use: Display:flex; Justify-content: center; Align-items: center; text-align: center; display: block; margin: auto; none of them worked

Continue reading

How to rotate svg circle in place?

Issue I’m trying to make this icon rotate like this: https://www.youtube.com/watch?v=Y61pjmWLSn8 At the moment the icon is moving all over the place. How can i make the icon rotate like the video? path { transform-origin: 50px 50px; animation-duration: 3s; animation-name:

Continue reading

I have gone through many posts saying "to add multiple animations, we can add them just by using commas(,)" but, in my case, its not happening

Issue #box{ animation:moving-box 20s linear infinite, box-rotation 20s linear infinite; transform-origin: center; } @keyframes box-rotation{ from{ transform: rotateZ(0deg); } to{ transform: rotateZ(360deg); } } @keyframes moving-box { 0%{ transform: translateX(-40%); } 50%{ transform: translateX(40%); } 100%{ transform: translateX(-40%); } }

Continue reading

svg outline and fill

Issue I have an svg of a heart with a black outline. I am interested in changing the outline to a red path, and then programmatically once it is clicked, I would like to fill the heart completely red. Similar

Continue reading

multiple rect in an svg?

Issue I expect rect is like div where’s display block? <svg width=”400″ height=”180″> <rect width=”150″ height=”150″ style=”fill:red;stroke:black;stroke-width:5;opacity:0.5″ /> <rect width=”150″ height=”150″ style=”fill:red;stroke:black;stroke-width:5;opacity:0.5″ /> </svg> but it will overlap each other. How to make another rect and wrap it within one

Continue reading

Resize SVG on Mobile

Issue How can I resize my SVG Logo for responsiveness on Mobile? Here’s my Fiddle and my code is below: body { background:black; } @media screen and (max-width: 500px) { svg { width:50%; } } <?xml version=”1.0″ encoding=”UTF-8″ standalone=”no” ?>

Continue reading

Search icon repeating twice on mobile

Issue My svg icon is repeating twice only on iphone (xs), chrome. Here is my code: SVG <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.7888 9.58435C6.8011 11.1763 3.89152 11.051 2.04893 9.20845C0.0719048 7.23142 0.0719048 4.02602 2.04893

Continue reading

Simple SVG SMIL not showing in Safari

Issue This codepen is working in every browser, except Safari. It’s not complicated, but I am pretty new to SVG and SMIL, so I might be missing something that isn’t supported? http://codepen.io/jaminroe/pen/rVoPRp Simplified version, with only 2 shapes: <svg height=”100px”

Continue reading

CSS to increase svg font size custom

Issue I am working with a svg element as follows and I am using css to control the font-size of the svg text. <svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 1280 720″> <rect class=”vBoxRect” width=”1280″ height=”720″ fill=”none” stroke=”red”></rect> <rect class=”boundRect” x=”70″ y=”70″ width=”1160″

Continue reading

Adobe Illustratore delete my class names on svg images. How can I prevent this?

Issue I have this svg image: <svg width=”160″ height=”250″ xmlns=”http://www.w3.org/2000/svg” class=”sovog”> <path class=”antenna-left” d=”M76.782 25.942c-.08-.815-2.192-20-22.867-21.928l.137-1.501c21.916 2.044 24.19 23.07 24.21 23.283l-1.48.146z” /> <ellipse class=”antenna-ball-left” fill=”#5E5E5E” cx=”55.021″ cy=”3.39″ rx=”3.344″ ry=”3.391″ /> <path class=”antenna-right” d=”M83.217 25.942c.08-.815 2.192-20 22.867-21.928l-.137-1.501c-21.916 2.044-24.188 23.07-24.209 23.283l1.479.146z” /> <ellipse

Continue reading

Scale path from center

Issue I have the following SVG graphic: <svg version="1.1" id="diagram" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="375px" height="150px"> <path d="M45,11.5H33.333c0.735-1.159,1.167-2.528,1.167-4C34.5,3.364,31.136,0,27,0s-7.5,3.364-7.5,7.5c0,1.472,0.432,2.841,1.167,4H9l-9,32h54L45,11.5z M22.5,7.5C22.5,5.019,24.519,3,27,3s4.5,2.019,4.5,4.5c0,1.752-1.017,3.257-2.481,4h-4.037 C23.517,10.757,22.5,9.252,22.5,7.5z" id="control"/> </svg> I want to programmatically change the scale of this object, but I want it to scale from the

Continue reading

How do I center text along an SVG curve?

Issue Is there a way to center the text along a curve in SVG? <svg width=”100″ height=”25″ xmlns=”http://www.w3.org/2000/svg”> <defs> <path id=”intermediate” d=”M 7 5 C 25 25, 75 25, 93 5″/> </defs> <text fill=”#105ca6″> <textPath style=”alignment-baseline: baseline;” xlink:href=”#intermediate”>Intermediate</textPath> </text> </svg>

Continue reading

Text around the SVG

Issue I’m absolutely beginner with SVG, and I need to put text around this moon… I tried to make text around a path and could not get the right sizes and match it with the moon. <svg viewBox=”-6 -6 30

Continue reading

SVG animation delay on each repetition

Issue I’d like to add a delay to each iteration of an SVG animation loop. Here’s a simple example. <svg xmlns=”http://www.w3.org/2000/svg” width=”100px” height=”100px”> <circle cx=”50″ cy=”50″ r=”15″ fill=”blue”> <animate id=”op” attributeType=”CSS” attributeName=”opacity” from=”1″ to=”0″ dur=”3s” repeatCount=”indefinite” /> </circle> </svg> Using

Continue reading