SVG Animation with CSS - css

iam currently trying to get a pinch to zoom animation done, with two different svg graphics. Is there a way, to transform or blend the first svg image into the second one, without using javascript, and maybe even without css?
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="-13 15 100 100" enable-background="new -13 15 100 100" xml:space="preserve">
<g id="Ebene_11">
<path fill="#010202" d="M78.5,93.1l0.8,1.4l-24.3,10l-0.4-1.4c0,0-0.8-2.6-3-4.2C49.7,97.4,29.7,81.2,30.2,75
c0.3-3.2-0.8-5.4-1.6-7c-0.7-1.3-1.3-2.5-0.7-3.7c0.4-0.9,1.3-1.5,2.6-1.7c1.8-0.3,4.8,0.3,6.8,2.5c1.7,1.8,2.8,4.8,3.9,7.7
c0.2,0.5,0.6,1.4,1,1.8c2.4,2.9,4.2,2.6,6,0.8c1.9-1.9,1.6-13.6-0.8-15c-1.8-1-4-1-6.8-1.9c-2.9-0.9-6.1-1.7-5.9-5.2
c0.3-1.6,0.7-2.4,2.8-3.2c4.7-1.8,14.9-2.2,19.5,2.5c1.2,1.2,2.2,1.8,2.8,3.1c0.7-0.4,2.3-1.1,3.4-1.1c3.8,0,14.4,16.8,14.5,16.9
c1.4,2.6-0.3,12.5-0.9,15.5C76.5,89.1,78.5,93.1,78.5,93.1z M56.6,100.9l18.8-7.8c-0.7-1.6-1.7-4.3-1.2-6.6
c1.1-5.7,1.8-12.5,1.2-13.7c-1.7-3.1-10.1-14.7-12.2-15.5c-0.8,0-1.3,0.4-1.6,0.6c0.4,1.2,0.6,2.4,0.9,3.4c0.3,1.4,0.6,2.6,1,3.6
c0.3,0.7,0,1.5-0.7,1.8c-0.7,0.3-1.5,0-1.8-0.7c-0.6-1.3-0.9-2.7-1.2-4.2c-0.3-1.2-0.5-2.5-1-3.7c0,0,0-0.1-0.1-0.1
c-0.6-1.6-2-2.8-3.4-4.3c-3.7-3.7-12.8-3.3-16.6-1.8c-1.6,0.6-1.7,1.5-1.7,1.7c-0.1,1.1,1,1.6,4.1,2.6c3.2,1,7.8,0.8,9.6,4.6
c0.3,0.6,0.9,3.6,0.9,4.6c0.4,8.3-0.2,10.8-4.3,13.2c-3.1,1.2-7.2-0.9-8.8-5.1c-1-2.6-2-5.4-3.3-6.8C34,65.4,32.3,65,31.3,65
c-0.5,0-0.8,0.1-0.9,0.2c0.1,0.3,0.4,0.9,0.6,1.4c0.9,1.8,2.2,4.5,1.9,8.4c-0.4,4.6,15.3,17.5,20.3,21.4
C55,98,56.6,100.9,56.6,100.9z">
<animate id="animation1"
attributeName="opacity"
from="1" to="0" dur="2s"
style="opacity:0"
repeatCount="1" />
</path>
</g>
<g>
<path style="opacity:0" d="M76.9,87.2c0.5-2.9,2.1-12.7,0.8-15.2c-0.1-0.2-10.6-16.5-14.3-16.5c-0.9,0-1.6,0.2-2.3,0.5c-0.5-2.9-1-6-1.2-8.5
c-0.4-5.3-1.3-8.5-4.9-8.9c-0.5-0.1-1.3,0-2.1,0.7c-2.1,2-3.3,8.3-2.8,16.2c0.6,12.3-1.1,20.5-3.2,21.3c-1.3,0.5-4-2.2-6.1-4.3
c-2.1-2.2-4.3-4.4-6.6-5.4c-2.7-1.1-5.5-0.5-7.1,0.5c-1,0.7-1.6,1.6-1.6,2.6c0,1.3,1,2.1,2.1,3.1c1.3,1.1,3.2,2.6,4.3,5.6
c2.1,5.7,18.3,18.5,20.2,20c2.2,1.6,3,4.1,3,4.1l0.4,1.4l23.7-10l-0.8-1.3C77.9,92.2,76.5,89.2,76.9,87.2z M57.2,100.9
c-0.6-1.2-1.6-2.8-3.4-4.1C49,93,36.1,82.3,34.5,78.1c-1.3-3.7-3.6-5.5-5.1-6.8c-0.4-0.3-0.9-0.8-1.1-1c0.1-0.1,0.3-0.3,0.8-0.5
c0.9-0.4,2.6-0.7,4.2,0c1.8,0.7,3.7,2.8,5.7,4.7c3.1,3.2,6,6.2,9,5c5.6-2.3,5.1-18.9,4.9-24c-0.5-8.9,1.2-13.5,2-14.1
c0.9,0.1,2,0.4,2.4,6.4c0.4,5.9,2.3,15.5,3.9,19.2c0.3,0.7,1.1,1,1.8,0.7c0.7-0.3,1-1.1,0.7-1.8c-0.6-1.3-1.3-3.9-2-6.8
c0.3-0.3,0.8-0.6,1.6-0.7c2.1,0.8,10.3,12,12,15.1c0.6,1.1-0.1,7.8-1.1,13.4c-0.5,2.3,0.5,4.9,1.2,6.5L57.2,100.9z">
<animate id="animation2"
attributeName="opacity"
from="0" to="1" dur="3s"
style="opacity:1"
repeatCount="1" />
</path>
</g>
</svg>
Didnt fount much on the aether about it...thanks in advance


got it
just added this to the first image
<animate id="animation1"
begin="0.8s"
attributeName="opacity"
from="1" to="0" dur="0.5s"
fill="freeze"/>
and this to the second one, and voila the animation is played once and stops then.
<animate id="animation2"
begin="0.8s"
attributeName="opacity"
from="0" to="1" dur="1.3s"
fill="freeze"/>
yay :)

Related

Set transform and size of <use> to allow it to be saved as .svg files correctly for editing

I created an <svg> element with JavaScript, here are my codes:
<svg xmlns:xlink="http://www.w3.org/1999/xlink">
<svg id="stroke_carrot" fill="#000000" viewBox="0 0 50 50" width="0px" height="0px">
<path d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1
9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2
2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3
2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8">
</path>
</svg>
<defs>
<pattern id="myPat" patternUnits="userSpaceOnUse" width="88" height="88" patternTransform="translate(0,0) rotate(0)">
<use width="44" height="44" xlink:href="#stroke_carrot" style="transform: translate3d(40px, 0px, 0px) rotate(80deg);"></use>
<use width="44" height="44" xlink:href="#stroke_carrot" style="transform: translate3d(60px, 0px, 0px) rotate(50deg);"></use>
</pattern>
</defs>
<rect x="0px" y="0px" width="300px" height="200px" fill="url(#myPat)"> </rect>
</svg>
The <svg> looks like this on the webpage, you can run the codes to see it.
Then I save this <svg> element as .svg file, and open it in Adobe Illustrator to edit it. It becomes different, like this:
Apparently, the transform attributes (position and rotation) do not work. Do you know how to make the transform work?
I want to save the <svg> element to a same looking .svg file that I can edit in Adobe Illustrator.
I tried to use x= and y= to set the position in the codes, then it works in the Illustrator. For the rotation I don't find a way to do. Also, since the other features of my site are not compatible with x and y (see this question), so I still hope I could be able to use transform to achieve it.

You can apply transform attributes directly to <use> elements.
Besides, nested svgs usually cause a lot of troubles for vector graphic applications – so be careful!
Example – tested in AI cs6 (so quite old..) and inkscape
<svg width="300px" height="200px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="stroke_carrot"
d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1
9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2
2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3
2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8">
</path>
<pattern id="myPat" patternUnits="userSpaceOnUse" width="88" height="88" >
<use fill="orange" href="#stroke_carrot" xlink:href="#stroke_carrot" transform="rotate(80 45 25) translate(20 0)" />
<use fill="blue" href="#stroke_carrot" xlink:href="#stroke_carrot" transform="rotate(50 65 25) translate(40 0)" />
</pattern>
</defs>
<rect x="0px" y="0px" width="300px" height="200px" fill="url(#myPat)"> </rect>
</svg>
Some common practices for standalone or editable svgs
include namespace attributes like xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" for best compatibility – well done!
include legacy href syntax xlink:href for <use> references. Although these are classified as deprecated – they are still needed by a lot of apps. You can also add the recommended href.– also well done!
use more "conservative" styling/formatting methods and features:
A lot of applications only support a reduced set of svg features (or vaguely described as svg 1.0-1.1 compatibility – not by any means precise)
transformations: As recommended by #Robert Longson: svg transform attributes tend to be more reliable:
3d transformations like translate3d might not be interpreted correctly.
Related properties like transform-origin or transform-box for specifying e.g. a pivot point for a rotation might also be ignored by some apps.
A workaround can be to convert all transformations to a matrix.
avoid nested svgs – a lot of applications will struggle to calculate these nested viewBoxes or x/y offsets.
In your case you can easily define your carrot path within the <defs> (or create a <symbol>).

Based on answer of #herrstrietzel, I updated a version with <symbol>. In this way we can resize the <use> element.
<svg width="300px" height="200px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="carrot" viewBox="0 0 50 50">
<path d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8z" />
</symbol>
<pattern id="myPat" patternUnits="userSpaceOnUse" width="88" height="88" >
<use xlink:href="#carrot" width="30" height="30" fill="orange" transform="rotate(80 45 25) translate(20 0)"></use>
<use xlink:href="#carrot" width="60" height="60" fill="blue" transform="rotate(50 65 25) translate(40 0)"></use>
</pattern>
<rect x="0px" y="0px" width="300px" height="200px" fill="url(#myPat)"> </rect>
</svg>
---- original answer ----
It does not work to set transform attribute/style for the <use> element directly, but we can embedded the <use> in the <svg> and <g>.
In this way we can also resize and recolor the referenced element (the <path> in this case).
Now it can be displayed properly in the browser, as well as be saved as an .svg file and opened for editing in Adobe Illustrator
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<svg fill="#000000" viewBox="0 0 50 50" width="0px" height="0px">
<path id="stroke_carrot" d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1
9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2
2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3
2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8">
</path>
</svg>
<defs>
<pattern id="myPat" patternUnits="userSpaceOnUse" width="88" height="88" patternTransform="translate(0,0) rotate(0)">
<g transform = "rotate(80 45 25) translate(20 0)">
<svg width="50" height="50" viewBox="0 0 50 50" fill="orange">
<use xlink:href="#stroke_carrot"></use>
</svg>
</g>
<g transform = "rotate(50 65 25) translate(40 0)">
<svg width="50" height="50" viewBox="0 0 50 50" fill="blue">
<use xlink:href="#stroke_carrot"></use>
</svg>
</g>
</pattern>
</defs>
<rect x="0px" y="0px" width="300px" height="200px" fill="url(#myPat)"> </rect>
</svg>
Note:
We need to wrap the <svg> in <g>, and set transform for <g>, to make it work for Chrome. More details see: Transform is not applied on Embedded SVGs Chrome
Rotate: The rotate(<a> [<x> <y>]) transform function specifies a rotation by a degrees about a given point.
Since I want the carrot rotates around its own center, I set the parameters for the transform attribute like this:transform = "rotate(degree width/2+x height/2+y) translate(x y)"

Issue with getting parts of a svg displayed

I'm dealing with some messy SVG code and have an issue with displaying icons on a product page.
This is how the icon should look:
Here is how it gets displayed with the drops missing (link to product page):
I inspected the code in the browser, and tried different things like setting the elements fill to a specific color etc. But even in the dev tools I wasn't able to set the color of the element in the dev tools with e.g. element.style{fill: red!important;}. I don't understand, where it gets overwritten.
I'd be grateful if someone can point me to the right direction.

Just need to display:none; or remove/comment of 2nd <g> inside <g id="Illu">. Attached screenshot will help you more.
Updated code of <g id="Illu"> :-
<g id="Illu">
<g>
<defs>
<rect id="SVGID_1_" x="2.8" y="2.8" width="70.9" height="70.9"></rect>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"></use>
</clipPath>
<path class="st1" d="M38.3,72.7c19,0,34.4-15.4,34.4-34.4c0-19-15.4-34.4-34.4-34.4S3.8,19.3,3.8,38.3
C3.8,57.3,19.3,72.7,38.3,72.7z"></path>
<path class="st2" d="M19.3,37.3c3.6,0,6.6-2.9,6.6-6.6c0-3.6-5-9.5-6.6-13.9c-1.6,4.4-6.6,10.3-6.6,13.9
C12.8,34.3,15.7,37.3,19.3,37.3z"></path>
<path class="st2" d="M33.7,43.6c2.6,0,4.7-2.1,4.7-4.7s-3.5-6.8-4.7-9.9c-1.1,3.1-4.7,7.3-4.7,9.9S31.2,43.6,33.7,43.6z"></path>
</g>
<!-- <g>
<defs>
<rect id="SVGID_3_" x="2.8" y="2.8" width="70.9" height="70.9"></rect>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" style="overflow:visible;"></use>
</clipPath>
<path class="st3" d="M38.3,72.7c19,0,34.4-15.4,34.4-34.4c0-19-15.4-34.4-34.4-34.4S3.8,19.3,3.8,38.3
C3.8,57.3,19.3,72.7,38.3,72.7z"></path>
</g>-->
<rect x="2.8" y="2.8" class="st4" width="70.9" height="70.9"></rect>
<g>
<path d="M12.5,61.1c0.6,0.7,1.3,1.4,1.9,2h47.7c0.7-0.6,1.3-1.3,1.9-2H12.5z"></path>
<path d="M57.5,66.8c0.9-0.6,1.8-1.3,2.7-2H16.3c0.9,0.7,1.7,1.4,2.7,2H57.5z"></path>
<path d="M57.7,23.3V35h2V23.3c-0.3,0-0.7,0.1-1,0.1S58.1,23.3,57.7,23.3z"></path>
<path d="M46.3,9.5h-12v2h11.9c0-0.2,0-0.5,0-0.7C46.2,10.4,46.2,10,46.3,9.5z"></path>
<path d="M49.1,18.8l-8.8,8.8l1.4,1.4l8.8-8.8C50,19.8,49.5,19.3,49.1,18.8z"></path>
<path d="M58.7,21.4c-5.8,0-10.5-4.7-10.5-10.5c0-1.8,0.5-3.6,1.3-5.1c-0.6-0.2-1.3-0.4-1.9-0.6c-0.7,1.4-1.2,2.8-1.3,4.4
c0,0.4-0.1,0.9-0.1,1.3c0,0.2,0,0.5,0,0.7c0.2,2.7,1.2,5.3,2.8,7.3c0.4,0.5,0.9,1,1.4,1.4c2,1.7,4.5,2.9,7.3,3.1
c0.3,0,0.7,0.1,1,0.1s0.7,0,1-0.1c3-0.2,5.6-1.5,7.6-3.4c-0.4-0.6-0.7-1.1-1.1-1.7C64.3,20.1,61.7,21.4,58.7,21.4z"></path>
</g>
<line class="st5" x1="65.8" y1="58.3" x2="10.4" y2="58.3"></line>
</g>

Applying filters on SVG straight lines make line disappear - discussing workaround for flood color filters [duplicate]

I have the following SVG document:
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 21 484" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dropShadow">
<feDropShadow dx="4" dy="0" stdDeviation="4"></feDropShadow>
</filter>
</defs>
<g id="Artboard" stroke-width="5" stroke="#FF0000" fill="#000000" stroke-linecap="round">
<path style="filter: url(#dropShadow)" d="M7.5,8.5 L7.5,471.5" id="path-1"></path>
</g>
</svg>
In Firefox, when I open the SVG document, it simply shows a very thin (not 5 wide) vertical line. In Chrome, it doesn't show anything (nor does it in codepen, here: https://codepen.io/jwir3/pen/BJBqEK ).
I'm not quite sure what I'm doing incorrectly here, but it has something to do with the filter, because, if I remove the filter: url(#dropShadow) from the path definition, the line shows up as expected.

You can't use objectBoundingBox units if your shape has no height or width.
Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.
The default for filterUnits is objectBoundingBox units so you need to change that to userSpaceOnUse i.e.
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 21 484" xmlns="http://www.w3.org/2000/svg">
<title>Line Drop Shadow</title>
<description>A red line with 5px width thickness and round caps, having a drop-shadow. This highlights the regression documented in PURP-1017.</description>
<defs>
<filter id="dropShadow" filterUnits="userSpaceOnUse">
<feDropShadow dx="4" dy="0" stdDeviation="4"></feDropShadow>
</filter>
</defs>
<g id="Artboard" stroke-width="5" stroke="#FF0000" fill="#000000" stroke-linecap="round">
<path style="filter: url(#dropShadow)" d="M7.5,8.5 L7.5,471.5" id="path-1"></path>
</g>
</svg>

When processing filters, different browsers process in different stroke.
Chrome considers stroke as a value with a zero pixel, so it does not include it in the filter region.
Therefore, to make the result look the same in different browsers, it is better to replace path with stroke-width ="5", a rectangle with a width of 5px withoutstroke (stroke="none")
In addition, the default values for the filter area are: x =" - 10% "" y = "- 10%" `` width = "120%" `` height = "120%"- large blur sizes are usually truncated .
By default, filterUnits = "objectBoundingBox" and therefore the values are specified in percentages.
To make it easier to calculate the size of the filter region action, specify the value offilterUnits = "userSpaceOnUse" and then you can specify all dimensions for thefilter region` in pixels.
<svg preserveAspectRatio="xMinYMin meet" width="100%" height="100%" viewBox="0 0 21 484" xmlns="http://www.w3.org/2000/svg" >
<defs>
<filter id="dropShadow" filterUnits = "userSpaceOnUse" x="4" y="0" width="12" height="472">
<feDropShadow dx="6" dy="4" stdDeviation="3"></feDropShadow>
</filter>
</defs>
<g id="Artboard" fill="#FF0000" filter="url(#dropShadow)" >
<!-- <path style="filter: url(#dropShadow)" d="M7.5,8.5 L7.5,471.5" id="path-1" stroke-width="5" ></path>-->
<rect x="5" y="5" width="5" stroke="none" height="463" />
</g>
</svg>

Swapping to userSpaceOnUse is the correct answer in most circumstances but has the following limitations:
The filter effects region will apply from -10% to 120% of the canvas, rather than the bounding box of the element (using more memory and processing time)
For large dynamic SVGs (such as created by d3) it can be hard to calculate the required filter x/y/width/height to ensure the filter applies to all elements.
An alternate (less elegant) solution is to apply the filter to a <g> and use a hidden node within this to give the group the correct width or height:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dropShadow" width="20">
<feDropShadow dx="4" dy="0" stdDeviation="4"></feDropShadow>
</filter>
</defs>
<g id="Artboard" style="filter: url(#dropShadow)">
<circle r="5" cx="0" cy="0" visibility="hidden"></circle>
<path d="M10,10 L10,100" stroke-width="5" stroke="#FF0000" fill="#000000" stroke-linecap="round"></path>
</g>
</svg>

svg animate does not work without indefinate

I am trying to add animation onto rect svg in React, using animate. The current code works with the repeatCount="indefinate", but I only want to animate when the rect is first rendered. Is there a way to do that?
I have tried removing repeatCount, but that does not work.
Thanks
<rect
width={20}
height={40}
x={props.xScale(dataWithOffset.whiskers[0])}
y={0}
fill={'blue}
opacity={0.4}
>
<animate
attributeName="opacity"
from="0"
to="1"
dur="2s"
begin="0s"
fill="freeze"
repeatCount="indefinite"
/>
</rect>

How can I create responsive joystick-layout buttons in HTML?

I'm creating Raspberry Pi WiFi controlled webcam robot. I've created a responsive window for the webcam feed, but I am unable to create the joystick buttons to control my robot.
This is the type of joystick I want to display below the feed:
How can I achieve it?

One possibility would be to use SVG:
It is a scalable vector image format (SVG stands for Scalable Vector Graphic), so it will adapt to different sizes without pixelizing or getting blurry.
SVG elements support interactivity and animations: so you could have click event listeners in the arrows and center button.
It is supported by all modern browsers (desktop and mobile).
Here is a demo with a controller similar to the one you have. Click on the "Full page" button to see how it grows and adapts to the width of the parent (20% of the screen) scaling without issues and keeping all the hot spots:
<div id="joystick" style="width:20%">
<svg width="100%" height="100%" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(16,16,16);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(240,240,240);stop-opacity:1" />
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(240,240,240);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(16,16,16);stop-opacity:1" />
</linearGradient>
<linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(168,168,168);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(239,239,239);stop-opacity:1" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#grad1)" />
<circle cx="50" cy="50" r="47" fill="url(#grad2)" stroke="black" stroke-width="1.5px" />
<circle cx="50" cy="50" r="44" fill="url(#grad3)" />
<circle cx="50" cy="50" r="20" fill="#cccccc" stroke="black" stroke-width="1px" onclick="alert('CENTER');" />
<path d="M50,14 54,22 46,22Z" fill="rgba(0,0,0,0.8)" onclick="alert('UP');" />
<path d="M50,86 54,78 46,78Z" fill="rgba(0,0,0,0.8)" onclick="alert('DOWN');" />
<path d="M14,50 22,54 22,46Z" fill="rgba(0,0,0,0.8)" onclick="alert('LEFT');" />
<path d="M86,50 78,54 78,46Z" fill="rgba(0,0,0,0.8)" onclick="alert('RIGHT');" />
</svg>
</div>

You can use Image map for your joystick buttons. In image map you can use image as a buttons, you need to define coordinates of the images to make it clickable. You can take reference from http://www.w3schools.com/tags/tag_map.asp . To make it responsive you can use Media Query. For reference go through http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Resources