Related
I have provided, as an example, an SVG of a lamp I created using Sketch. I intend for the lamp's head to scale by a factor (e.g. 1.2 here) when the cursor hovers over - to indicate interactivity. The issue is, however, when hovering over the lamp head its location is also transformed. Firstly, I'd like to know what the scale is using to base its transformation on - is it the other transforms, the positional values in the ellipses/paths?
Secondly, how can I go about ensuring that scaling occurs around the origin of the group () I am interested in?
I have tried to swap out the translates for x,y positions on the elements, as well as nesting svgs to no avail. I believe there's a fundamental piece of the svg framework here I'm not quite grasping.
.interactive:hover {
scale: 1.2;
}
<svg viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg">
<svg>
<g fill="none" fill-rule="evenodd" transform="translate(0 .832)">
<path fill="#FCFC30" fill-opacity=".35"
d="M283.589311,155.632129 L373.36705,522.838236 C377.564302,540.005704 367.049864,557.325232 349.882396,561.522484 C347.399779,562.129455 344.853386,562.436827 342.297648,562.438029 L162.3966,562.522631 C144.72349,562.530942 130.389866,548.210793 130.381555,530.537683 C130.380345,527.962942 130.689882,525.397465 131.303454,522.896901 L221.426762,155.606192 C225.638338,138.442233 242.966634,127.942251 260.130594,132.153828 C271.714734,134.996266 280.756541,144.04562 283.589311,155.632129 Z"
transform="rotate(32 252.31 295.631)"></path>
/* This following group is the one to be made interactive */
<g fill-rule="nonzero" transform="translate(264.313 121.836)" class="interactive" cursor="pointer">
<ellipse fill="#EFCF6A" rx="17.298" ry="17.28" cx="41.1" cy="90.717"></ellipse>
<path fill="#E5DBDA"
d="M0,68.8755609 C0,68.8755609 23.9403854,39.015945 48.4343057,32.3804748 L89.5342738,57.6782049 C89.5342738,57.6782049 95.6231579,89.4731662 76.9413543,118.641587 L0,68.8755609 Z"></path>
<path fill="#E5DBDA"
d="M89.5342738,0.585513479 L97.5605301,5.2856382 C97.5605301,5.2856382 102.127193,8.32689537 100.88174,15.2388435 C97.8157022,29.5668288 94.0284052,43.7312658 89.5342738,57.6782049 L48.4343057,32.3804748 C48.4343057,32.3804748 73.6201447,6.52978886 79.0171102,2.52085895 C81.9461562,0.0899965767 85.9303942,-0.643174192 89.5342738,0.585513479 L89.5342738,0.585513479 Z"></path>
</g>
<polygon fill="#BFBEBA" fill-rule="nonzero"
points="351.731 188.715 524.683 188.65 524.678 200.692 351.726 200.757"
transform="rotate(22.9 438.204 194.704)"></polygon>
<polygon fill="#BFBEBA" fill-rule="nonzero"
points="400.402 312.102 586.898 312.149 586.902 328.477 400.406 328.43"
transform="rotate(104.4 493.652 320.29)"></polygon>
<ellipse cx="516.376" cy="230.602" fill="#E5DBDA" fill-rule="nonzero" rx="11.624"
ry="11.612"></ellipse>
<path fill="#BFBEBA" fill-rule="nonzero"
d="M391.968793,463.396323 L508.764661,463.396323 C512.968159,463.396323 516.375767,466.800366 516.375767,470.999466 L516.375767,482.611539 L384.219304,482.611539 L384.219304,470.999466 C384.219304,468.958805 385.039816,467.003668 386.497246,465.573761 C387.954677,464.143853 389.926333,463.35922 391.968793,463.396323 Z"></path>
<polygon fill="#BFBEBA" fill-rule="nonzero"
points="453.273 466.714 461.299 419.022 476.521 419.022 483.164 466.714"></polygon>
<ellipse cx="469.879" cy="414.321" fill="#E5DBDA" fill-rule="nonzero" rx="16.606"
ry="16.589"></ellipse>
</g>
</svg>
</svg>
First a small example. The red rectangle behaves like you lamp -- the scaling happens from 0,0 (top left corner). The "right" solution is the green. You can see that I move 0,0 to the middle of the rectangle by setting x and y to negative values. This is just one shape -- you have multiple. So, the blue rectangle is nested in more groups and the hover/scale happens on the one group that does not have a transform already (important). So instead of changing all the x,y values for all the shapes (here just the one blue rectangle) you can group and translate that group in the negative direction making 0,0 the middle of the group.
Now, go and see my edits of your drawing. I added two groups. The one scales the group and the other places 0,0 in the middle. The values are half the width and height of the entire group. If you are using an editor you can select the group/elements and see the width and height, or like I did open the dev tools in the browser and use the function getBBox() on the element/group (it returns width = 101.09695434570312 and height = 118.64158630371094 ~ 50,60). I also had to add the reverse values to the original group, so that the lamp is in place.
PS I also moved the polygon that draws the arm up above the lamp group so that is stays behind the lamp when it scales.
.hover:hover {
scale: 1.2;
}
<svg viewBox="0 0 100 100" width="200">
<rect class="hover" width="20" height="20" x="0" y="10" fill="red" />
<g transform="translate(40 20)">
<rect class="hover" width="20" height="20" x="-10" y="-10" fill="green" />
</g>
<g transform="translate(70 20)">
<g class="hover">
<g transform="translate(-10 -10)">
<rect width="20" height="20" x="0" y="0" fill="blue" />
</g>
</g>
</g>
</svg>
.interactive:hover > g {
scale: 1.2;
}
<svg viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg">
<svg>
<g fill="none" fill-rule="evenodd" transform="translate(0 .832)">
<path fill="#FCFC30" fill-opacity=".35"
d="M283.589311,155.632129 L373.36705,522.838236 C377.564302,540.005704 367.049864,557.325232 349.882396,561.522484 C347.399779,562.129455 344.853386,562.436827 342.297648,562.438029 L162.3966,562.522631 C144.72349,562.530942 130.389866,548.210793 130.381555,530.537683 C130.380345,527.962942 130.689882,525.397465 131.303454,522.896901 L221.426762,155.606192 C225.638338,138.442233 242.966634,127.942251 260.130594,132.153828 C271.714734,134.996266 280.756541,144.04562 283.589311,155.632129 Z"
transform="rotate(32 252.31 295.631)"></path>
<polygon fill="#BFBEBA" fill-rule="nonzero"
points="351.731 188.715 524.683 188.65 524.678 200.692 351.726 200.757"
transform="rotate(22.9 438.204 194.704)"></polygon>
/* This following group is the one to be made interactive */
<g fill-rule="nonzero" transform="translate(264.313 121.836) translate(50 60)" class="interactive" cursor="pointer">
<g>
<g transform="translate(-50 -60)">
<ellipse fill="#EFCF6A" rx="17.298" ry="17.28" cx="41.1" cy="90.717"></ellipse>
<path fill="#E5DBDA"
d="M0,68.8755609 C0,68.8755609 23.9403854,39.015945 48.4343057,32.3804748 L89.5342738,57.6782049 C89.5342738,57.6782049 95.6231579,89.4731662 76.9413543,118.641587 L0,68.8755609 Z"></path>
<path fill="#E5DBDA"
d="M89.5342738,0.585513479 L97.5605301,5.2856382 C97.5605301,5.2856382 102.127193,8.32689537 100.88174,15.2388435 C97.8157022,29.5668288 94.0284052,43.7312658 89.5342738,57.6782049 L48.4343057,32.3804748 C48.4343057,32.3804748 73.6201447,6.52978886 79.0171102,2.52085895 C81.9461562,0.0899965767 85.9303942,-0.643174192 89.5342738,0.585513479 L89.5342738,0.585513479 Z"></path>
</g>
</g>
</g>
<polygon fill="#BFBEBA" fill-rule="nonzero"
points="400.402 312.102 586.898 312.149 586.902 328.477 400.406 328.43"
transform="rotate(104.4 493.652 320.29)"></polygon>
<ellipse cx="516.376" cy="230.602" fill="#E5DBDA" fill-rule="nonzero" rx="11.624"
ry="11.612"></ellipse>
<path fill="#BFBEBA" fill-rule="nonzero"
d="M391.968793,463.396323 L508.764661,463.396323 C512.968159,463.396323 516.375767,466.800366 516.375767,470.999466 L516.375767,482.611539 L384.219304,482.611539 L384.219304,470.999466 C384.219304,468.958805 385.039816,467.003668 386.497246,465.573761 C387.954677,464.143853 389.926333,463.35922 391.968793,463.396323 Z"></path>
<polygon fill="#BFBEBA" fill-rule="nonzero"
points="453.273 466.714 461.299 419.022 476.521 419.022 483.164 466.714"></polygon>
<ellipse cx="469.879" cy="414.321" fill="#E5DBDA" fill-rule="nonzero" rx="16.606"
ry="16.589"></ellipse>
</g>
</svg>
</svg>
I am trying to place an arrow on the midpoint of the bezier curve. The solution using <animateMotion> in the question How properly shift arrow head on cubic bezier in SVG to its center , which moves a <path> which is the arrow and freezes it at the middle of the bezier curve, works only in Firefox. As the curve's points keep changing frequently in my case, I didn't want to use marker-mid as it is costly for me to calculate the midpoint of the bezier curve everytime.
<svg viewBox="0 0 500 500">
<g>
<path id="path1" d="M291.698 268.340 C321.698 268.340, 411.904 93.133 441.904 93.133"></path>
<path class="path_arrow" d="M0,0 L6,6 L0,12" transform="translate(-3,-6)">
<animateMotion dur="0s" rotate="auto" fill="freeze" keyTimes="0;1" keyPoints="0.5;0.5">
<mpath xlink:href="#path1"></mpath>
</animateMotion>
</path>
</g>
<g transform="translate(166.698,243.340)">
<circle r="5" class="p1"></circle>
</g>
<g transform="translate(441.904,68.133)" >
<circle r="5" class="p2"></circle>
</g>
</svg>
Is there any way to do this using CSS Animations so as to avoid using <animateMotion> ?
EDIT 1:
The endpoints of the curve here is draggable and so the points of the curve tend to change frequently. The animation is to move the arrow to the center of the curve without calculating the midpoints.
EDIT 2:
Thanks to Kaiido's comment, I added calcMode="linear" and the arrow is now placed on the path as expected. But When I reposition the end point by dragging, the arrow stays in its initial position(as shown) in Chrome but it is expected to move along the parent path. In Firefox this is working fine as before.
You could achieve the same with CSS offset-path, offset-distance and offset-rotate properties:
#path1 {
fill: none;
stroke: black;
}
.path_arrow {
transform: translate( -3px, -6px );
offset-path: path("M220 104C220 144,400 180,400 224");
offset-rotate: auto;
offset-distance: 50%;
}
body { background: white; }
<svg width="500" height="500" >
<path id="path1" d="M 220 104 C 220 144 400 180 400 224"
fill="none" stroke-width="2" stroke="black" />
<path class="path_arrow" d="M0,0 L0,12 L12,6 z" />
</svg>
But their browser support is far lower than the one of SMIL, so I wouldn't recommend it.
Note that I did fix the answer there where they were missing a calcMode="linear" attribute to make Blink browsers happy.
If you need IE support, you may want to try this js implementation which seems to support <animateMotion> and rotate, keeping in mind I didn't test it myself.
Regarding the question's "EDIT 2":
Chrome indeed seems to need an explicit call to update the <mpath>. This can be done by calling the beginElement() method of the <animationMotion> element after each update:
document.querySelector('svg').onmousemove = function(e) {
const rect = this.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
path1.setAttribute( 'd', `M ${x} ${y} C 220 144 400 180 400 224` );
// Chrome requires an explicit update
document.querySelector('animateMotion').beginElement();
}
<pre style="position: absolute;pointer-events:none">move your mouse to change the path</pre>
<svg width="500" height="500" >
<path id="path1" d="M 220 104 C 220 144 400 180 400 224"
fill="none" stroke-width="2" stroke="black" />
<path d="M0,0 L0,12 L12,6 z" transform="translate(-3,-6)">
<animateMotion dur="0s" rotate="auto" fill="freeze"
keyTimes="0;1" keyPoints="0.5;0.5" calcMode="linear" >
<mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path1"/>
</animateMotion>
</path>
</svg>
You have to use webkit animation inside the css. Also i would recommend https://codepen.io/collection/yivpx/. Is an open source project for SVG optimization. I also encourage you to name all your classes within your SVG in order to do cool CSS stuff with animate, like:
animation: kaboom 5s ease alternate infinite;
I'm trying to get all (direct) children from the outermost SVG element of the fragment - or in other words: all 2nd-leves elements of the fragment.
Im using this code: fragment.selectAll("svg>*")
This works as long as there is only one SVG element in the given fragment. But if there are nested SVG elements (which is ok according to https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg ) this returns also elements that are further down in the hierarchical structure - meaning that are 3rd, 4th or of higher levels.
<svg id="svg_1" height="380mm" width="490mm" viewBox="0 0 490 380" version="1.0">
<g id="g_1" transform="translate(57.5,47.5)">
<svg id="svg_2" version="1.1" height="5" width="5" viewBox="0 0 5 5">
<path d="m 4.9997035,2.4940359 ... z"/>
</svg>
</g>
<g id="g_2" transform="translate(57.5,97.5)">
<svg id="svg_3" version="1.1" height="5" width="5" viewBox="0 0 5 5">
<path d="m 4.9997035,2.4940359 ... z"/>
</svg>
</g>
...
</svg>
I my result, I want only the g elements (ids: g_1 and g_2) but I'm getting also the two path elements.
It seems promising to replace the line above with this one:
fragment.select("svg").children()
However, this one includes a bunch of #text elements which is not included by the original one and I don't know how to remove them from the query result.
I'm trying to download some icons from http://game-icons.net/ and I need all black pixels to be transparent. All the techniques I've found on google have not worked, they have only turned them white.
Thanks for your time.
Am I missing something? Assuming you are using the SVG versions, why can't you just select the black rectangle and delete it?
Assuming for the moment you are correct, and perhaps it is some issue with importing the SVG into AI, it is easy enough to do it manually in a text editor.
Here are the contents of the "electric.svg" icon file:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="m0,0h512v512h-512z"/>
<g transform="matrix(15 0 0 15 -5924 -6649.4327)">
<use width="744.094" height="1052.362" transform="translate(432 440.36218)"/>
</g>
<g fill="#fff" transform="matrix(-3.75 0 0 3.75 2295.9997 -3330.35765)">
<path d="m512,944.3622 32,0 0-52 32,76-32,0 0,52z"/>
</g>
</svg>
http://jsfiddle.net/Hp8dT/
There is a <g> and a <use> in there that are not doing anything, so you could get rid of them if you like.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="m0,0h512v512h-512z"/>
<g fill="#fff" transform="matrix(-3.75 0 0 3.75 2295.9997 -3330.35765)">
<path d="m512,944.3622 32,0 0-52 32,76-32,0 0,52z"/>
</g>
</svg>
http://jsfiddle.net/Hp8dT/1/
The first <path> element is the one that is creating the black background, so just delete it. But in order for the lightning symbol (which is currently white) to be visible, we will need to change its colour. We'll use red.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<g fill="red" transform="matrix(-3.75 0 0 3.75 2295.9997 -3330.35765)">
<path d="m512,944.3622 32,0 0-52 32,76-32,0 0,52z"/>
</g>
</svg>
http://jsfiddle.net/Hp8dT/2/
I have an svg defining a path drawn on a transparent background -- a pretty basic svg.
I need to convert this svg so that the background is white and the text is transparent and cutout of the white background. I have been playing around with clip-path but to no avail. How is the right way to make this modification?
<svg width="138" xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 138 40">
<g transform="translate(2 30)">
<path d="m6.12,0 5.88,0 0-2.46-.6,0-2.535-9.21-5.46,0-2.535,9.21-.6,0 0,2.46 5.13,0 0-2.46-.9,0 .24-1.2 2.025,0 .255,1.2-.9,0 0,2.46m-.435-8.235 .15,0 .615,2.985-1.38,0 .615-2.985"/>
<path d="m12.3696-9.21 .66,0 0,6.75-.66,0 0,2.46 4.77,0 0-2.46-.66,0 0-9.21-4.11,0 0,2.46"/>
<path d="m17.5552-5.88 .66,0 0,3.42-.66,0 0,2.46 5.28,0 0-2.46-1.17,0 0-3.42 1.17,0 0-2.46-1.17,0c0-.63 .255-.87 1.035-.87 .735,0 1.47,.075 1.47,.075v-2.355c0,0-.78-.39-2.43-.39-2.205,0-3.495,1.035-3.495,3.54h-.69v2.46"/>
<path d="m28.518,0 4.11,0 0-2.46-.66,0 0-2.46c0-2.415-.945-3.63-4.155-3.63-2.385,0-4.155,.525-4.155,.525v2.58c.99-.225 2.295-.435 3.48-.435 1.125,0 1.38,.3 1.38,.87-3.735,0-5.4,1.02-5.4,2.88 0,1.515 1.065,2.34 2.775,2.34 1.44,0 2.25-.75 2.625-1.23v1.02m0-3.42c0,.645-.33,.96-.915,.96-.57,0-.825-.135-.825-.48 0-.48 .675-.57 1.74-.57v.09"/>
<path d="m41.9899-2.685c-.75,0-.93-.285-.93-.885h-3.3v2.97c0,0 1.815,.81 4.695,.81 3.21,0 4.95-1.29 4.95-3.855 0-2.58-1.935-3.375-4.26-4.125-.615-.195-.93-.3-.93-.645 0-.42 .27-.57 .93-.57 .465,0 .825,.18 .825,.75h3.15v-2.685c0,0-1.485-.96-4.38-.96-3.84,0-5.115,1.38-5.115,3.615 0,2.34 1.44,3.135 4.41,4.245 .705,.255 .87,.465 .87,.735 0,.39-.255,.6-.915,.6"/>
<path d="m47.8481-9.21 .66,0 0,6.75-.66,0 0,2.46 4.77,0 0-2.46-.66,0 0-9.21-4.11,0 0,2.46"/>
<path d="m58.2837,0 4.11,0 0-2.46-.66,0 0-2.46c0-2.415-.945-3.63-4.155-3.63-2.385,0-4.155,.525-4.155,.525v2.58c.99-.225 2.295-.435 3.48-.435 1.125,0 1.38,.3 1.38,.87-3.735,0-5.4,1.02-5.4,2.88 0,1.515 1.065,2.34 2.775,2.34 1.44,0 2.25-.75 2.625-1.23v1.02m0-3.42c0,.645-.33,.96-.915,.96-.57,0-.825-.135-.825-.48 0-.48 .675-.57 1.74-.57v.09"/>
<path d="m66.9288-11.67-4.11,0 0,2.46 .66,0 0,6.75-.66,0 0,2.46 4.11,0 0-1.02c.375,.48 1.185,1.23 2.325,1.23 2.07,0 3.075-1.62 3.075-4.38 0-2.76-1.005-4.38-3.075-4.38-1.14,0-1.95,.75-2.325,1.23v-4.35m1.74,8.25c0,.675-.3,.96-.87,.96-.57,0-.87-.285-.87-.96v-1.5c0-.675 .3-.96 .87-.96 .57,0 .87,.285 .87,.96v1.5"/>
<path d="m83.0515-2.46c-.675,0-1.02-.33-1.02-1.11v-4.53c0-.78 .345-1.11 1.02-1.11 .675,0 1.02,.33 1.02,1.11v4.53c0,.78-.345,1.11-1.02,1.11m5.73-3.375c0-4.38-2.235-6.045-5.73-6.045-3.495,0-5.73,1.665-5.73,6.045 0,4.38 2.235,6.045 5.73,6.045 3.495,0 5.73-1.665 5.73-6.045"/>
<path d="m94.4339,0 4.77,0 0-2.46-.66,0 0-2.46c0-2.505-1.02-3.63-2.655-3.63-1.35,0-2.055,.75-2.535,1.23v-1.02h-4.11v2.46h.66v3.42h-.66v2.46h4.77v-2.46h-.66v-2.46c0-.675 .3-.96 .87-.96 .57,0 .87,.285 .87,.96v2.46h-.66v2.46"/>
<path d="m103.732-8.55c-2.775,0-4.53,1.455-4.53,4.38 0,2.925 1.755,4.38 4.53,4.38 2.385,0 3.735-.75 3.735-.75v-2.4c-.72,.24-1.86,.48-3.18,.48-1.05,0-1.425-.36-1.425-1.08v-.09h4.86v-1.08c0-1.89-.915-3.84-3.99-3.84m0,2.67c.57,0 .87,.285 .87,.96v.09h-1.74v-.09c0-.675 .3-.96 .87-.96"/>
</g>
</svg>
Try using a mask instead of a clip path.
<mask id="m"> ... </mask>
Inside the mask, create a white rectangle, followed by (under) your black paths. The brightness of different areas of the mask determines the opacity of the corresponding areas of the element the mask is applied to, with white areas being fully opaque and black areas being fully transparent.
<rect width="100%" height="100%" fill="white" />
<g transform="translate(2 30)"> ... </g>
After the mask, add another rectangle and set its mask attribute to your mask. This rectangle is the white background you wanted, so give it a white fill.
<rect width="100%" height="100%" fill="white" mask="url(#m)" />
This should give you the effect you want. Check out this fiddle: http://jsfiddle.net/9tT6T/