This question already has answers here:
Draw double curved item with beveled edges
(4 answers)
Closed 2 years ago.
I'm looking for a way to realize this in CSS:
I'm looking for the correct approach to do it.
I thought about using clip-path: url(#svg); in CSS but it's quite hard to get it right.
I already have this svg which represents the bottom shape I want:
<svg height="0" width="0" viewbox="0 0 1 1">
<defs>
<clipPath id="wave" clipPathUnits="objectBoundingBox">
<!--<path d="M600,2 L600,42 L302.524213,42 C301.660332,42.0252073 300.818928,42.0252073 300,42 L0,42 L0,2 C133.63289,-1.65889201 206.966223,1.34619028 220,11.0152469 C247.844727,31.671749 274.511393,42 300,42 L302.524213,42 C319.584145,41.5022057 345.409408,31.1739546 380,11.0152469 C395.066732,2.23465585 468.400065,-0.770426432 600,2 Z" id="Combined-Shape" fill="#000000"></path>-->
<path d="M1,0.048192771084337 L1,1.0120481927711 L0.50420702166667,1.0120481927711 C0.50276722,1.0126555975904 0.50136488,1.0126555975904 0.5,1.0120481927711 L0,1.0120481927711 L0,0.048192771084337 C0.22272148333333,-0.039973301445783 0.344943705,0.03243832 0.36666666666667,0.26542763614458 C0.413074545,0.7631746746988 0.45751898833333,1.0120481927711 0.5,1.0120481927711 L0.50420702166667,1.0120481927711 C0.53264024166667,1.0000531493976 0.57568234666667,0.75117962891566 0.63333333333333,0.26542763614458 C0.65844455333333,0.053847128915663 0.780666775,-0.018564492337349 1,0.048192771084337 Z" id="Combined-Shape" fill="#000000"></path>
</clipPath>
</defs>
</svg>
The SVG looks like this:
What approach is the easiest to achieve this?
Maybe you can add :: after. It's a normal box, and that wavy part in the :: after part.
Related
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 take a complex path shape and apply it as a clip-path mask in css, but I can't figure out how to get the clip mask to "fill" the parent container.
Rather it just gets cut off or doesn't expand to fill the available space.
If I add clipPathUnits="objectBoundingBox" it doesn't appear at all.
<svg viewBox="0 0 720 720">
<defs>
<clipPath id="map">
<path d="M568.421 326.842L511.579 270v37.895h-18.947v-18.948h-56.843v37.895l18.948 37.894v18.948h-18.948l37.896 56.842h-37.896l-18.947-18.948v-18.947h-37.895L360 383.684h-18.947l-18.948-37.894v-37.895L360 270l37.895-37.895-18.948-37.895H360v18.948l-18.947-18.948h-18.948v37.895h-37.894l-56.843-18.947-37.894-56.842h-56.842l-18.947-18.948-75.79 75.79v37.895h18.947v75.789L37.895 345.79l5.532 48.163 32.362 46.573 113.685 37.895 94.737 18.947h94.736v-18.947h37.895l18.947 37.895h18.948v56.842l56.842-37.894v-37.896h37.895l18.947-37.894v-37.896l56.842-37.894V345.79l-18.948-18.948z"/><path d="M246.315 194.21h56.843v-18.947l-18.947-37.895h-18.948v37.895h-18.948zM227.368 137.368h18.947v-18.947h-37.894V156.316h18.947zM341.053 175.263h56.842l37.894 37.895-18.947 18.947V270h75.79v-18.947h-37.895v-18.948h37.895V194.21h-37.895l-56.842-56.842h-56.842zM265.263 99.474h18.948v18.947h-18.948zM284.211 61.579h18.947v18.948h-18.947zM303.158 108.947h18.947v18.947h-18.947zM341.053 99.474h37.895v18.947h-37.895zM227.368 80.526h18.947v18.947h-18.947zM378.947 80.526V4.737H360l-37.895 37.894v18.948l18.948 18.947zM587.368 440.526h37.895v37.895h-37.895zM663.158 364.736V345.79h-18.947V402.631l56.842-18.947v-18.948zM378.947 270h18.947v18.947h-18.947zM644.211 421.578h18.947v18.948h-18.947zM644.211 459.474h18.947v18.947h-18.947z"/>
</clipPath>
</defs>
</svg>
https://codepen.io/picard102/pen/aEwJzR
As Robert said, when you specify clipPathUnits="objectBoundingBox", the coordinates in the clip path definition are supposed to be between 0,0 (the top left) and 1,1 (the bottom right).
Your paths are about 700x575, so your path is about 600 to 700 times too big.
The simplest solution is to add a transform attribute to your <clipPath> that scales the coordinates down to the correct range.
<clipPath id="map" clipPathUnits="objectBoundingBox" transform="scale(0.00143, 0.00174)">
1/700 ~= 0.00143
1/575 ~= 0.00174
https://codepen.io/anon/pen/GyvZOM
I created a demo https://codepen.io/anon/pen/rzLEQX
But I want that the text was inside the container g id = "g12" but how to do this? Do I need the variables x = y =?
<g id="g12">
<title>Header 12</title>
<desc>Text 12</desc>
<path id="path16" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#231f20;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="M 482.25,470.173 H 260.693 V 607.898 H 482.25 Z" />
<text x="30" y="90" fill="#ED6E46" font-size="100" font-family="'Leckerli One', cursive">Watermelon</text>
</g>
In SVG, the <g> element represents just a logical/descriptive grouping. It doesn't imply any physical grouping. An element won't shift on the page, just because it is inside a <g> tag. It's not like HTML where text inside a <div> will respond to the position and size of the <div>.
In SVG, if you want to physically move an element around, you have to position it yourself by changing its coordinate values. In the case of <text>, that normally means changing its x and y values. However, you can also adjust the position of an element with the transform attribute.
So, to answer your question: yes, you need to change the x and y.
I want to create this triangular/polygonal shape using SVGs and assign it a background image.
<svg class="svg-graphic" width="100%" height="100%" class="svg-graphic" viewBox="0 0 100 100" >
<defs>
<pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
<image x="0" y="0" xlink:href="http://25.media.tumblr.com/fe6e34ef00254f2bd05451f525b02324/tumblr_mw8osqc77F1qdrz3yo3_500.jpg"></image>
</pattern>
<polygon points="0, 0, 100, 0, 50, 50" fill="url('http://25.media.tumblr.com/fe6e34ef00254f2bd05451f525b02324/tumblr_mw8osqc77F1qdrz3yo3_500.jpg')"/>
</defs>
</svg>
Very similar to this question here:
Happy Chanukkah
The problem is the fill="#url"
you have to give the polygon/path a class and then from that class, assign the background image (that's already defined in the defs):
.imageFill {
fill: url(#image);
}
The fill attribute references the pattern, in your case it's url(#image) (like you'd do in CSS). Repeating the image's URL is pointless there. See the accepted answer in the question you linked to.
Apart from that you must make sure, that the view box spanned by the <pattern> actually matches the shape it shall be applied to. See this updated fiddle: http://jsfiddle.net/boldewyn/k7Rk9/12/