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/
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 create a svg image with 2 paths, where the outer shape is filled with a color, while the inside one is not. I am using React, and the code is the following:
<SvgIcon
className={className}
nativeColor={theme.palette[color] ? theme.palette[color].main : color}
style={{
height: `${size}px`,
width: `${size}px`,
}}
viewBox="0 0 32 32">
<g fillRule="evenodd">
<path
d="M16,0 C9.372583,0 4,5.0144108 4,11.2 C4,19.6 16,32 16,32 C16,32 28,19.6 28,11.2 C28,5.0144108 22.627417,0 16,0 Z"
fill={color}
fillOpacity="1"
fillRule="nonzero"
stroke="none"
/>
<path
d="M15.5,4 L6,9.18181818 L15.5,14.3636364 L23.2727273,10.1231818 L23.2727273,16.0909091 L25,16.0909091 L25,9.18181818 M9.45454545,12.7918182 L9.45454545,16.2463636 L15.5,19.5454545 L21.5454545,16.2463636 L21.5454545,12.7918182 L15.5,16.0909091 L9.45454545,12.7918182 Z"
fill="none"
/>
</g>
This displays the entire shape filled, so the inner shape is not visible. However, if instead of fill="none" I have fill="#FFFFFF", this works, and I see the shape displayed. Any idea why and how I can fix it, without filling the inner shape with a color?
You will need to join the 2 d attributes in one and use fill-Rule="evenodd"
<svg
style="height: 100px"
viewBox="0 0 32 32">
<path
d="M16,0 C9.372583,0 4,5.0144108 4,11.2 C4,19.6 16,32 16,32 C16,32 28,19.6 28,11.2 C28,5.0144108 22.627417,0 16,0 Z
M15.5,4 L6,9.18181818 L15.5,14.3636364 L23.2727273,10.1231818 L23.2727273,16.0909091 L25,16.0909091 L25,9.18181818
M9.45454545,12.7918182 L9.45454545,16.2463636 L15.5,19.5454545 L21.5454545,16.2463636 L21.5454545,12.7918182 L15.5,16.0909091 L9.45454545,12.7918182 Z"
fill="red"
stroke="none"
fill-rule="evenodd"
/>
</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 am new to svg and tried to replicate a simple mouseovereffect with inkscape, but my svg isnt doing a thing.
<svg xmlns="http://www.w3.org/2000/svg" width="74mm" height="105mm" viewBox="0 0 74 105">
<ellipse cx="37.042"
cy="244.461" rx="30.994" ry="24.568"
onmouseover=fill:"red";
onmouseout=fill"none";
opacity=".75" fill="#1a1a1a"
stroke="#000" stroke-width=".076"
stroke-linejoin="round"
paint-order="stroke markers fill"
transform="translate(0 -192)"/>
Can anybody tell me what i must put into the 2 fields of the inkscapeprogramm to make it work? I searched several hours but didnt find a matching solution.
I tried it with onmousein and fill:"red" and fill:"none" onmouseout but thats also not working.
many thanks in advance
onmouseover you want to change the style of the ellipse. Also as onmouseout you fill:noneyou need to add pointer-events:all for the ellipse to be able to interact with the mouse.
<svg xmlns="http://www.w3.org/2000/svg" width="74mm" height="105mm" viewBox="0 0 74 105">
<ellipse cx="37.042"
cy="244.461" rx="30.994" ry="24.568"
onmouseover="this.style.fill='red'";
onmouseout="this.style.fill='none'";
opacity=".75" fill="#1a1a1a"
stroke="#000" stroke-width=".076"
stroke-linejoin="round"
paint-order="stroke markers fill"
pointer-events="all"
transform="translate(0 -192)"/>
</svg>
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/