I found this immensely helpful CodePen about animating SVGs via CSS. First question, would it also work with line elements? I tried it with a few different keywords but didn't succeed:
svg {
width: 200px;
height: 200px;
}
.path path {
transition: d 400ms;
}
.line line {
transition: x1 400ms, y1 400ms, x2 400ms, y2 400ms;
}
.path:hover path {
d: path("M10,90 L90,10");
}
.line:hover line {
x1: line("10");
y1: point("90");
x2: coord("90");
y1: pos("10");
}
<svg class="path" viewBox="0 0 100 100">
<g stroke="black" stroke-width="5">
<path d="M10,10 L90,90"/>
</g>
</svg>
<svg class="line" viewBox="0 0 100 100">
<g stroke="black" stroke-width="5">
<line x1="10" y1="10", x2="90" y2="90"/>
</g>
</svg>
Also, where is the documentation for this, the fact that you have to write d: path("M10,90 L90,10"); instead of just d: "M10,90 L90,10"; seems non-trivial to me, how would that work with other properties of other elements?
Only presentation attributes have their counter-parts in CSS.
As of today, here is the list of these attributes:
Properties with a presentation attribute
Elements that support the presentation attribute
cx, cy
‘circle’ and ‘ellipse’
height, width, x, y
‘foreignObject’, ‘image’, ‘rect’, ‘svg’, ‘symbol’, and ‘use’
r
‘circle’
rx, ry
‘ellipse’ and ‘rect’
d
‘path’
fill
Any element in the SVG namespace except for animation elements, which have a different ‘fill’ attribute.
transform
For historical reasons, the transform property gets represented by different presentation attributes depending on the SVG element it applies to:transformAny element in the SVG namespace with the exception of the ‘pattern’, ‘linearGradient’ and ‘radialGradient’ elements.‘patternTransform’‘pattern’. ‘patternTransform’ gets mapped to the transform CSS property[css-transforms-1].‘gradientTransform’‘linearGradient’ and ‘radialGradient’ elements.‘gradientTransform’ gets mapped to the transform CSS property [css-transforms-1].
alignment-baseline, baseline-shift, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, cursor, direction, display, dominant-baseline, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, mask-type, opacity, overflow, paint-order, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-overflow, text-rendering, transform-origin, unicode-bidi, vector-effect, visibility, white-space, word-spacing, writing-mode
Any element in the SVG namespace.
You can see that lines's x1, x2, y1 and y2 aren't there, and thus can't be controlled and thus animated by CSS.
For the values d can receive in CSS it's described here and basically it can receive either a path() function, or the value none.
I am working with SVG from some time now. But still I can't understand the viewbox after watching many videos and reading many articles.
I am trying to generate SVG dynamically:
import SvgIcon from '#material-ui/core/SvgIcon';
<SvgIcon className="svg" width="24" height="24" viewBox="0 0 24 24">
<g>
<path
d={scrapbookElement.icon.path}
/>
</g>
</SvgIcon>
Here is my JSON file which provides me scrapbookElements:
[
{
"id": "image",
"text": "Image",
"icon": {
"path": "M9.5999776,12.699997L11.899997,15.099998 13.299991,14.300003 19.000005,20 22.899999,18 28.299995,20.699997 28.299995,25.699997 3.5999767,25.699997 3.5999767,18.599998z M20.500005,11.699997L21.199987,11.699997 21.000005,12.800003 20.699987,12.800003z M23.09998,10.699997L23.799993,11.599998 23.59998,11.800003 22.699987,11.099998z M18.699987,10.699997L19.199987,11.199997 18.299993,11.900002 18.000005,11.599998z M23.59998,8.5999985L24.699987,8.8000031 24.699987,9 23.59998,9.1999969z M18.09998,8.5999985L18.09998,9.3000031 17.000005,9 17.000005,8.8000031z M20.799993,7C21.899999,7 22.699987,7.9000015 22.699987,8.9000015 22.699987,10 21.799993,10.800003 20.799993,10.800003 19.699987,10.800003 18.899999,9.9000015 18.899999,8.9000015 18.899999,7.8000031 19.799993,7 20.799993,7z M23.500005,6.0999985L23.699987,6.3000031 23.000005,7.1999969 22.500005,6.6999969z M18.199987,6.0999985L19.09998,6.8000031 18.59998,7.3000031 18.000005,6.3000031z M20.699987,5L21.000005,5 21.199987,6.0999985 20.500005,6.0999985z M2.1999823,2.4000015L2.1999823,26.800003 29.400001,26.800003 29.400001,2.4000015z M0,0L31.900001,0 31.900001,32 0,32z"
}
},
{
"id": "text",
"text": "Text",
"icon": {
"path": "M29.15,0L30.186011,0.012001038 30.610999,0.43099976 31.096015,3.868 31.209998,7.8079987 31.101996,8.3949966 30.610999,8.6230011 29.875007,8.5510025 29.437018,7.9520035 28.312018,5.298996 26.993995,3.7130013 25.82801,3.072998 24.294013,2.6170006 22.390996,2.3429985 20.12,2.2509995 18.580998,2.3590012 17.940007,2.6829987 17.868993,3.0900002 17.868993,26.970001 18.048009,28.272003 18.58701,29.113998 19.659001,29.697998 21.437016,30.227997 22.149999,30.389 22.467015,30.490997 22.707005,31.401001 22.179997,32 21.910008,31.994003 21.198003,31.928001 15.424992,31.640999 10.755008,31.879997 9.4850186,31.879997 9.1740131,31.305 9.2879972,30.665001 10.011996,30.275002 11.737002,29.695 12.791018,29.005997 13.401005,27.909996 13.605015,26.298996 13.605015,3.0900002 13.390018,2.5390015 12.743014,2.2750015 12.342013,2.2579994 11.329989,2.2509995 7.3779925,2.6469994 4.6229872,3.8320007 3.0840158,5.4970016 1.7250066,8.1439972 1.2399907,8.7959976 0.598999,8.7900009 0.041992187,8.4729996 0,7.9039993 0.62899778,4.7839966 0.83898971,0.59899902 1.2040105,0.20999908 2.2999882,0.14400101 7.7489947,0.39500046 13.748997,0.47900009 19.16602,0.44900131 23.539008,0.35900116 26.867011,0.20999908z"
}
}
]
Here is the output:
I can handle that with overflow: visible in css. But I dont want to do it because then i will get problems with height and width, which will lead me to incorrect centering using flexbox.
Here is codesandbox that reproduces the issue:
Click here for code sandbox
Basically if you want to fit SVG into a container you need to set the viewBox attribute to exact values of its content. In this case, from the points in the d attributes you can see that it's 0 0 32 32 (as in: x, y, width, height).
Then you can resize the SVG using the width and height attributes to stretch/shrink to the container you want it to fit into (taking into account aspect ratio, of course).
If you don't know the right value of viewBox for a given SVG, and you don't have strokes - like the examples above, you can try using dev tools in the browser and call .getBBox() on the <svg> element, which will give you the x, y, width, and height to place in the viewBox.
In order to get the size of a path I've transformed yours icons in true svg
console.log(test.getBBox());
console.log(test1.getBBox())
<svg className="svg" width="24" height="24" viewBox="0 0 32 32" >
<g>
<path id="test"
d="M9.5999776,12.699997L11.899997,15.099998 13.299991,14.300003 19.000005,20 22.899999,18 28.299995,20.699997 28.299995,25.699997 3.5999767,25.699997 3.5999767,18.599998z M20.500005,11.699997L21.199987,11.699997 21.000005,12.800003 20.699987,12.800003z M23.09998,10.699997L23.799993,11.599998 23.59998,11.800003 22.699987,11.099998z M18.699987,10.699997L19.199987,11.199997 18.299993,11.900002 18.000005,11.599998z M23.59998,8.5999985L24.699987,8.8000031 24.699987,9 23.59998,9.1999969z M18.09998,8.5999985L18.09998,9.3000031 17.000005,9 17.000005,8.8000031z M20.799993,7C21.899999,7 22.699987,7.9000015 22.699987,8.9000015 22.699987,10 21.799993,10.800003 20.799993,10.800003 19.699987,10.800003 18.899999,9.9000015 18.899999,8.9000015 18.899999,7.8000031 19.799993,7 20.799993,7z M23.500005,6.0999985L23.699987,6.3000031 23.000005,7.1999969 22.500005,6.6999969z M18.199987,6.0999985L19.09998,6.8000031 18.59998,7.3000031 18.000005,6.3000031z M20.699987,5L21.000005,5 21.199987,6.0999985 20.500005,6.0999985z M2.1999823,2.4000015L2.1999823,26.800003 29.400001,26.800003 29.400001,2.4000015z M0,0L31.900001,0 31.900001,32 0,32z"
/>
</g>
</svg>
<hr>
<svg className="svg" width="24" height="24" viewBox="0 0 32 32" >
<g>
<path id="test1"
d="M29.15,0L30.186011,0.012001038 30.610999,0.43099976 31.096015,3.868 31.209998,7.8079987 31.101996,8.3949966 30.610999,8.6230011 29.875007,8.5510025 29.437018,7.9520035 28.312018,5.298996 26.993995,3.7130013 25.82801,3.072998 24.294013,2.6170006 22.390996,2.3429985 20.12,2.2509995 18.580998,2.3590012 17.940007,2.6829987 17.868993,3.0900002 17.868993,26.970001 18.048009,28.272003 18.58701,29.113998 19.659001,29.697998 21.437016,30.227997 22.149999,30.389 22.467015,30.490997 22.707005,31.401001 22.179997,32 21.910008,31.994003 21.198003,31.928001 15.424992,31.640999 10.755008,31.879997 9.4850186,31.879997 9.1740131,31.305 9.2879972,30.665001 10.011996,30.275002 11.737002,29.695 12.791018,29.005997 13.401005,27.909996 13.605015,26.298996 13.605015,3.0900002 13.390018,2.5390015 12.743014,2.2750015 12.342013,2.2579994 11.329989,2.2509995 7.3779925,2.6469994 4.6229872,3.8320007 3.0840158,5.4970016 1.7250066,8.1439972 1.2399907,8.7959976 0.598999,8.7900009 0.041992187,8.4729996 0,7.9039993 0.62899778,4.7839966 0.83898971,0.59899902 1.2040105,0.20999908 2.2999882,0.14400101 7.7489947,0.39500046 13.748997,0.47900009 19.16602,0.44900131 23.539008,0.35900116 26.867011,0.20999908z"
/>
</g>
</svg>
Then I've used the method .getBBox() to get the size of the bounding boxes for the two icons. In both cases the width and the height for the bounding box is almost 32 and the and the x and y is 0. I've changed the viewBox to x y w h i.e 0 0 32 32. This will scale down the image inside the svg, while the width and the height of the svg element stays at 24/24
I have the following SVG shape which is created programmatically.
<svg style="overflow:visible; margin-left:121px; margin-top:39px; " height="206" width="327">
<path d=" M 244.3,102.7 A 82.3,52 0,0 0,82.3 102.7 L 1.3,102.7 A 163.3,102.7 0,0 1,325.3 102.7 L 325.3,102.7 365.8,102.7 284.8,153.3 203.8,102.7 244.3,102.7 L 244.3,102.7 " x="1.5" y="1.5" style="fill:#92d050; stroke-width:3; stroke:blue; "></path>
</svg>
The fiddle for the above is : http://fiddle.jshell.net/VJL5W/
As one can see the right tip of the arrow is truncated because its path coordinates move outside the dimensions of the SVG.
One thing I can do is to traverse the path of the shape after it has been created and change the height and width of the svg tag according to the highest coordinate values I find, but it will make my code inefficient.
I tried overflow:visible; but it didn't work.
Is there anyway I can make the truncated part visible without changing the SVG's height and width?
Thanx in advance!!
Note: Interestingly overflow:visible is working on firefox but not in chrome based browsers. Also, my SVG is being created server-side from a corresponding VML image in a single parse conversion, so solutions that involve using any client side script can't be used by me.
You can wrap the svg element with a div element, and set styles to the div element, then enlarge the svg size enough to render whole graphic.
<div style="overflow:visible; margin-left:121px; margin-top:39px; height:206px; width:327px;">
<svg height="206px" width="500px">
<path d=" M 244.3,102.7 A 82.3,52 0,0 0,82.3 102.7 L 1.3,102.7 A 163.3,102.7 0,0 1,325.3 102.7 L 325.3,102.7 365.8,102.7 284.8,153.3 203.8,102.7 244.3,102.7 L 244.3,102.7 " x="1.5" y="1.5" style="fill:#92d050; stroke-width:3; stroke:blue; "></path>
</svg>
</div>
document.getElementsByTagName("path")[0].getBBox() will get the bounds of the path (x, y, width, height) you can use those to set the <svg> element width and height.
Use the viewBox attribute of SVG. The viewBox tells the SVG is to take all the image that is being drawn within the viewBox and then apply width and height to it.
Fiddle here
<svg style="overflow:visible; margin-left:121px; margin-top:39px; " height="206" width="327" viewBox="0 0 300 300">
<path d=" M 244.3,102.7 A 82.3,52 0,0 0,82.3 102.7 L 1.3,102.7 A 163.3,102.7 0,0 1,325.3 102.7 L 325.3,102.7 365.8,102.7 284.8,153.3 203.8,102.7 244.3,102.7 L 244.3,102.7 " x="1.5" y="1.5" style="fill:#92d050; stroke-width:3; stroke:blue; "></path>
</svg>
Adding this to Chrome seems make it work but I am not sure if your layout can accommodate wider SVG. Have not tried in IE.
svg {
width:100%;
}