<html lang="en-US">
<head>
<link rel="stylesheet" href="https://codepen.io/basement/pen/oepKxY.css">
</head>
<body>
<iframe src="https://s.codepen.io/basement/debug/zdpVyV/PNAvYLZmJRQr"></iframe>
<div class="wrp">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
width="100" height="100"
class="canvas"
>
<defs>
<style type="text/css">
polygon { fill: none; stroke-width: 0.5; stroke: #f00; }
</style>
</defs>
<g transform="translate( 0 12.5 ) scale( 1 )">
<polygon
points="
75,6.7
75,93.3
0,50
"
transform="rotate( -30 50 50 )"
/>
</g>
</svg>
</div>
<script src="origin.js"></script>
</body>
</html>
I want to make the red triangle in the snippet above scale larger while defining a specific transform origin. With the rotate attribute in SVG we can do this:
transform="rotate( -30 50 50 )"
The first value: -30 rotates element counter-clockwise. The 50 50 defines the transform origin ( x and y respectively ). Can I do this with scale?. I want my red triangle to scale up but keep it's origin centered.
Note: I know about transform-origin in CSS but I'm assuming the coordinate system that CSS uses will be relative to the whole web page or it's closest positioned element like it usually is... I want to define it in SVG coordinate terms like done with the rotate property.
You can translate --> scale --> translate_back
e.g.
<g transform="translate( 0 12.5 ) translate( 50 50) scale( 1.5 ) translate( -50 -50)">
Explanation: Assuming you would like to use (50 50) as the scale origin, this will first translate your shape by (-50, -50) so that your desired scale origin will now be at (0, 0). Then you scale, and finally you reverse the translation to put the shape back where it were.
I think this may be what you're looking for:
<style>
#<Some id> {
transform-box:fill-box; transform-origin: left; transform:scale(0.3,1);
fill:green;
}
</style>
This will scale with referencepoint on the left side of the bouding box of your SVG element.
Related
This is my path tag size (g tag is same size)
And this is my SVG tag size
There is space between them
These are the inline attributes...
<svg preserveAspectRatio="none" class="JDicon JDicon__svg JDicon--white JDicon--large" alignment-baseline="central" version="1.1" data-tip="false" viewBox="0 0 64 64">
<g>
<path d="M56.562,6.875 L3.437,6.875 C1.539,6.875 -0.000,5.336 -0.000,3.437 C-0.000,1.539 1.539,-0.000 3.437,-0.000 L56.562,-0.000 C58.461,-0.000 60.000,1.539 60.000,3.437 C60.000,5.336 58.461,6.875 56.562,6.875 ZM3.437,24.062 L32.656,24.062 C34.555,24.062 36.094,25.601 36.094,27.500 C36.094,29.398 34.555,30.937 32.656,30.937 L3.437,30.937 C1.539,30.937 -0.000,29.398 -0.000,27.500 C-0.000,25.601 1.539,24.062 3.437,24.062 ZM43.437,30.937 C41.539,30.937 40.000,29.398 40.000,27.500 C40.000,25.601 41.539,24.062 43.437,24.062 L43.562,24.062 C45.461,24.062 47.000,25.601 47.000,27.500 C47.000,29.398 45.461,30.937 43.562,30.937 L43.437,30.937 ZM3.437,47.125 L56.562,47.125 C58.461,47.125 60.000,48.664 60.000,50.562 C60.000,52.461 58.461,54.000 56.562,54.000 L3.437,54.000 C1.539,54.000 -0.000,52.461 -0.000,50.562 C-0.000,48.664 1.539,47.125 3.437,47.125 Z">
</path>
</g>
</svg>
This is css for svg
{
width: 1.8rem;
height: 1.8rem;
}
I am trying to figure out why this space exists.
https://codepen.io/colton123/pen/qBEGwLL
Two things: Your icon is not a perfect square, and there is a gap in the icon itself on the right side.
First, with the <svg> set to 1.8rem (32px in CodePen) the <g> is 30x27px. If you changed the height and width of <svg> to 3rem (48px in CodePen) the <g> would be 45x40.5px. Since you are forcing <svg> into a square, there will be a gap.
Second, the width of <g> should match the width of <svg>, but it is always 93.75% of the width. This means there is a 6.25% gap in the icon itself.
Hello please see this and solve your issue of SVG. Thanks
svg {
width: 2rem;
height: auto;
}
<svg class="JDicon JDicon__svg JDicon--white JDicon--large" alignment-baseline="central" version="1.1" data-tip="false" viewBox="0 0 62 56"><g><path d="M56.562,6.875 L3.437,6.875 C1.539,6.875 -0.000,5.336 -0.000,3.437 C-0.000,1.539 1.539,-0.000 3.437,-0.000 L56.562,-0.000 C58.461,-0.000 60.000,1.539 60.000,3.437 C60.000,5.336 58.461,6.875 56.562,6.875 ZM3.437,24.062 L32.656,24.062 C34.555,24.062 36.094,25.601 36.094,27.500 C36.094,29.398 34.555,30.937 32.656,30.937 L3.437,30.937 C1.539,30.937 -0.000,29.398 -0.000,27.500 C-0.000,25.601 1.539,24.062 3.437,24.062 ZM43.437,30.937 C41.539,30.937 40.000,29.398 40.000,27.500 C40.000,25.601 41.539,24.062 43.437,24.062 L43.562,24.062 C45.461,24.062 47.000,25.601 47.000,27.500 C47.000,29.398 45.461,30.937 43.562,30.937 L43.437,30.937 ZM3.437,47.125 L56.562,47.125 C58.461,47.125 60.000,48.664 60.000,50.562 C60.000,52.461 58.461,54.000 56.562,54.000 L3.437,54.000 C1.539,54.000 -0.000,52.461 -0.000,50.562 C-0.000,48.664 1.539,47.125 3.437,47.125 Z"></path></g></svg>
Your should be viewBox="0 0 62 54" instead of viewBox="0 0 62 62"
Today, I have started to learn SVG and using it in HTML.
So, I created a file in SVG as follows:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewbox="0 0 400 200">
<path d = "M0,100 L100,100 L125,50 L175,150 L225,50 L275,150 L300,100 L400,100"
style="
stroke: #000000;
stroke-width: 5;
fill: none;
"
/>
</svg>
Then I tried to use it in html as image:
<!DOCTYPE html>
<html>
<head>
.....
</head>
<body>
<div class="menu">
<ul>
<li class="menu-item"><img src="svg/mysvg.svg" height="48" width="48"></img></li>
<li ...... />
<li ...... />
<li ...... />
</ul>
</div>
</body>
</html>
But I cannot see the svg as its not resized. What is my mistake? Can anybody point me to the right direction?
The problem is that viewBox has been written with a lower-case b. As a result, this parameter is not recognized by the browser. In an SVG without a viewBox attribute, all lengths are assumed to be in pixels, so resizing the SVG will have no effect.
If you change viewbox to viewBox, the SVG will scale so that the view box area matches the dimensions of the SVG (in much the same way as an ordinary embedded image).
hey i have some Svg elements consisting each out of a polygon shape. see the following code:
<body>
<svg class="svgRules" width = "100%" height="200">
<polygon class="opmaakPoly" id ="p1" points="500,0 1920,0 1920,200 600,200"/>
</svg>
<svg class="svgRules" width = "100%" height="200">
<polygon class="opmaakPoly" id="p2" points="600,0 1920,0 1920,200 700,200"/>
</svg>
</body>
with the following style:
body{
margin: 0;
padding: 0;
}
.svgRules{
float: left;
}
.opmaakPoly{
stroke:#F0c;
fill: #FFF;
stroke-width:2px;
}
now when i scale the browser window the polygon shapes dont scale accordingly i tried setting the points to percentages but that didnt seem to work. so how do i make the polygon element scale with the browser window?
JSFiddle
Try to add
viewBox="0 0 1920 1080" preserveAspectRatio="none"
or similar to your svg tag - the viewbox should have the your desired (svg-internal) size, while preserveAspectRatio will allow it to scale properly - check the available values if "none" doesn't create the desired result.
oke thanks to rainforce15 and maxshuty i figured out how to do it properly!
you indeed need to add the:
viewBox="0,0,1920,1080" preserveAspectRation="none"
but you need to make the viewBox the size of the polygon shape inside otherwise it will deform the polygon shape.
so instead of using:
viewBox="0,0,1920,1080"
use
viewBox="0,0,1920,200"
I am trying to rotate my svg path from it's top most point, but it's always rotating from it's top left corner, unable to change the pivot point.
I also tried to change it from transform-origin property, but didn't work out.
If there is any idea please share..
Here is my codes ::
<!-- CSS -->
<style>
.pivot {transform: rotate(60deg);}
</style>
<!-- html -->
<div>
<svg style="width:30px; overflow: visible; margin-left: 200px; margin-top: 100px;" x="0px" y="0px" viewBox="0 0 38.1 102">
<polygon class="pivot" fill="#3F964E" stroke="#000000" stroke-miterlimit="10" points="19.6,0.6 0.6,10.6 19.6,99.6 37.6,11.6 "/>
</svg>
</div>
transform:origin will work...although different browsers (I believe) have different interpretations of the origin point.
For Chrome (in this instance) because the top point of the path is actually at the top/center:
.pivot {
transform: rotate(45deg);
transform-origin:top center;
}
JSfiddle Demo
Note that this is Chrome only...FF has a different result.
You should use the svg transform attribute to rotate.
As said is the svg documentation :
The rotate(<a> [<x> <y>]) transform function specifies a rotation by a degrees about a given point. If optional parameters x and y are not supplied, the rotation is about the origin of the current user coordinate system. If optional parameters x and y are supplied, the rotate is about the point (x, y).
example :
<rect width="10" height="10" fill="red" transform="rotate(-10 50 100)" />
See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
I have a webpage where I will repeat the logo of my company several times - one time in big size, white logo ; one time in small size, white logo ; one time in small size, orange logo.
For now I'm using JPG files - all good with 3 JPGs.
But I wonder whether I can use SVG for this use case, ideally without duplicating the SVG code within the page.
Would you have any clue?
Thanks,
Nicolas
Maybe this can serve as an inspiration for you: I'm embedding a bogus logo inside the HTML and using CSS to scale and color it differently. This is the HTML:
<h1>my page</h1>
<div class="big logo" title="big logo">
<svg id="logo" viewBox="0 0 50 50">
<rect x="1" y="1" stroke-width="2" width="48" height="48"/>
<circle cx="25" cy="25" r="23" fill="currentColor"/>
</svg>
</div>
<div>some text on my page and a small logo</div>
<div class="logo">
<svg id="smallLogo">
<use xlink:href="#logo"/>
</svg>
</div>
<div>some more text on my page and a differently colored logo</div>
<div class="yellow logo">
<svg id="smallLogo">
<use xlink:href="#logo"/>
</svg>
</div>
And the CSS:
.logo > svg {
fill:green;
stroke:blue;
color:red;
height:75px;
width:75px;
}
.big.logo > svg {
height:200px;
width:200px;
}
.yellow.logo > svg {
fill:yellow;
color:orange;
stroke:black;
}
See example on jsFiddle. Unfortunately, this only seems to work with Firefox and Chrome. Neither Opera nor Internet Explorer seem to like this (also not the new versions 9 and 10). Didn't try Safari.
So, I guess, unless you want to restrict the viewers to Webkit and Firefox browsers or use JavaScript to duplicate the SVG and modify certain attributes of the different instances, you're better off with either three different JPEG files (PNG would be better), or two different SVG files (in two different colors -- you can obviously rescale without problems).
If you don't need to use the image as a CSS background, then it's possible to use the SVG Stacks technique to do this.
Here's an example, a single svg file that contains several different icons, where the size of the image also decides how the svg looks.
Here's a part of that svg file to illustrate:
<?xml version="1.0" encoding="utf-8"?>
<svg id="icon" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style>
svg .icon { display: none }
svg .icon:target { display: inline }
/* media-queries can control the appearance too */
#hours {
fill:none;
stroke:#850508;
stroke-dasharray:1,5.28;
stroke-dashoffset:0.5;
stroke-width: 1.5px;
}
#media screen and (max-width: 128px) {
#hours {
stroke-dasharray:1, 17.84;
stroke-width: 2px;
}
}
#media screen and (max-width: 64px) {
#hours {
stroke-dasharray: none;
}
}
/* shared styles */
.icon * { fill: #850508; }
</style>
</defs>
<svg viewBox="0 0 32 32">
<g id="clock" class="icon">
<path d="M16,4c6.617,0,12,5.383,12,12s-5.383,12-12,12S4,22.617,4,16S9.383,4,16,4 M16,0 C7.164,0,0,7.164,0,16s7.164,16,16,16s16-7.164,16-16S24.836,0,16,0L16,0z"/>
<path d="M21.422,18.578L18,15.152V8h-4.023v7.992c0,0.602,0.277,1.121,0.695,1.492l3.922,3.922
L21.422,18.578z"/>
<path id="hours" d="M16,4c6.617,0,12,5.383,12,12s-5.383,12-12,12S4,22.617,4,16S9.383,4,16,4"/>
</g>
</svg>
<svg viewBox="0 0 32 32">
<g id="star" class="icon">
<polygon points="22.137,19.625 32,12 20,12 16,0 12,12 0,12 9.875,19.594 6,32 16.016,24.32 26.008,32"/>
</g>
</svg>
</svg>
Each icon can have a unique look with different colors, gradients etc (in my example all the icons share the same fill, but they don't have to do that).