SVG Transform vs CSS Transform

Developer
Amelia Bellamy-Royds
Size
4,175 Kb
Views
36,432
  1. SVG Transform vs CSS Transform Previews
  2. SVG Transform vs CSS Transform HTML Codes
  3. SVG Transform vs CSS Transform CSS Codes

How do I make an svg transform vs css transform?

What is a svg transform vs css transform? How do you make a svg transform vs css transform? This script and codes were developed by Amelia Bellamy-Royds on 06 September 2022, Tuesday.

SVG Transform vs CSS Transform Previews
IQ Test

SVG Transform vs CSS Transform - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Transform vs CSS Transform</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>SVG vs CSS Transforms</h1>
<section> <h2>Original Graphics</h2> <p>The "All SVG" figure is an SVG graphic that will be manipulated with SVG transforms. "SVG/CSS" is an SVG graphic, the graphical contents of which will be manipulated with CSS transforms. "HTML/CSS" figure may look similar, but actually contains a stylized div with pseudo-elements; it will also be manipulated with CSS transforms.</p>
<svg class="SVG graphic"> <g id="svg-transform"> <g id="svg-shapes"> <rect width="100%" height="100%" rx="2em" fill="lightblue" stroke="green" /> <circle r="1.5em" cy="2.5em" cx="70%" fill="lightyellow" stroke="goldenrod"/> <rect width="5em" height="2em" x="20%" y="2.5em" fill="lavender" stroke="indigo" /> </g> <text x="20%" dx="2.5em" text-anchor="middle" y="2.5em" dy="1em">All SVG</text> </g>
</svg>
<svg class="CSS graphic"> <g id="svg-css"> <use xlink:href="#svg-shapes"/> <text x="20%" dx="2.5em" text-anchor="middle" y="2.5em" dy="1em">SVG/CSS</text> </g>
</svg> <div class="CSS graphic"><div></div></div>
</section>
<section>
<h2>2D Transforms</h2> <p>The <a href="http://www.w3.org/TR/SVG11/coords.html#TransformAttribute">SVG transform attribute</a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform">CSS transform property</a> both accept the same basic transformation functions: rotate, translate, skewX, skewY, scale (uniform or with separate X and Y scales), and matrix transform (which is just a mathematical shorthand for all the others combined). The CSS syntax also offers shorthand versions of scale and translate for setting only the x or y parameter. There are other important differences: </p> <table> <thead><th>SVG 1.1</th><th>CSS 3</th></thead> <tbody> <tr> <td> Universal browser support for the SVG 1.1 syntax (browsers that support SVG, anyway). </td> <td> Webkit browsers and IE9 require prefixes. </td> </tr> <tr> <td> As an XML attribute, the transform must be declared on each element or group. </td> <td> As a CSS style property, the transform can be declared inline or through a stylesheet. </td> </tr> <tr> <td> Transform functions currently only accept numbers as parameters, not lengths with units. Angles are interpretted in degrees, and distances in user coordinates (pixels unless a scale applies). </td> <td> Angles and lengths require units, and can be calculated from multiple units using a <code>calc()</code> function. The exceptions are scale parameters (which are logically unitless) and matrix parameters (which are interpretted as pixels). </td> </tr> <tr> <td> The origin for scaling, rotating and skewing of SVG graphical elements is the origin of the coordinate system (top left corner of the graphic by default). </td> <td> The origin for transformations of HTML objects (including a top-level <code>&ltsvg></code> embedded in HTML) is by default the center of the object's height/width box, although it can be reset using the <code>transform-origin</code> property. <em>CSS transformations of SVG graphical elements use the SVG origin unless another origin is explicitly set.</em> </td> </tr> </tbody> </table> <p>The <a href="http://www.w3.org/TR/css-transforms-1/">proposed specs for the CSS transforms</a> would apply to SVG as well, integrating the SVG transform attribute as a "presentation attribute". The CSS syntax with units would be preffered, although the older syntax would be supported for backward compatibility. And just like other SVG attributes like <code>fill</code> or <code>stroke</code>, any transforms specified as an XML attribute would be over-ridden by the CSS cascade. </p> <h3>Translation & Rotation</h3> <svg class="SVG graphic"><use xlink:href="#svg-transform" transform="translate(20,-20)rotate(10)"/></svg> <svg class="CSS graphic translate rotate"><use xlink:href="#svg-css"/></svg> <div class="CSS graphic translate rotate"><div></div></div> <h3>Skew and Scale</h3> <svg class="SVG graphic"><use xlink:href="#svg-transform" transform="skewX(20)scale(1.5,0.8)"/></svg> <svg class="CSS graphic skewX scale"><use xlink:href="#svg-css"/></svg> <div class="CSS graphic skewX scale"><div></div></div> <h3>Matrix</h3> <svg class="SVG graphic"><use xlink:href="#svg-transform" transform="matrix(0.7, 0.8, 0, 0.8, 0.7, -10)"/></svg> <svg class="CSS graphic matrix"><use xlink:href="#svg-css"/></svg> <div class="CSS graphic matrix"><div></div></div>
</section>
<section> <h2>3D Transforms</h2> <p>Here is where CSS gets all the fun. Poor old SVG 1.1 doesn't support 3D at all. It's not just that there aren't any ready-made functions for 3D effects: creating faux-perspective&mdash;where one end of a rectangle ends up narrower than the other&mdash; just isn't possible with a linear matrix transformation. </p> <p>Of course, you can use CSS transforms on SVG elements, but prepared for some cross-browser quirks until the standards get settled. For the graphics below (which have transform origin set to <code>50% 50%</code>), Chrome spins each figure as a single plane around the center of the coordinate system, but Firefox spins each one around the center of its own bounding box.</p> <svg class="CSS graphic spin"><use xlink:href="#svg-css"/></svg> <div class="CSS graphic spin"><div></div></div> <p>And if the content of the SVG is rendered as a text element instead of as part of a graphical (<code>&lt;use></code>) element, Chrome (33) doesn't apply the 3D transform at all.</p> <svg class="graphic CSS spin"> <use xlink:href="#svg-shapes"/> <text x="20%" dx="2.5em" text-anchor="middle" y="2.5em" dy="1em">3D???</text> </svg>
</section>
</body>
</html>

SVG Transform vs CSS Transform - Script Codes CSS Codes

body { max-width:50em; margin:0 auto; padding:1em;
}
section:after, p, h2, h3 { clear:both;
}
h1{ text-align:center; font-variant:small-caps; text-decoration:underline;
}
h3:before{ content:"➣"; padding:0 0.5em;
}
table { border-collapse:collapse; table-layout:fixed;
}
th,td { border:ridge 3px darkgray; width:50%;
}
th{ background:lightgray; padding:0.2em;
}
td { padding: 0.5em 0.75em;
}
.graphic { display:block; width:30%; max-width:15em; height:7em;
}
svg.graphic { padding:2em 1.2%; margin:0; float:left; overflow:visible; shape-rendering:geometricPrecision; stroke-width:3;
}
div.graphic { margin:2em 1.2%; padding:0; box-sizing:border-box; float:right; position:relative;
}
div.graphic div { height:100%; width:100%; position:absolute; border-radius:2em; border:green solid; background-color:lightBlue;
}
div.graphic div::before { content:""; position:absolute; right:15%; top:1em; height:3em; width:3em; border-radius:50%; background-color:lightyellow; border:solid goldenrod;
}
div.graphic div::after { content:"HTML/CSS"; position:absolute; left:20%; top:calc(50% - 1em); width:5em; height:2em; text-align:center; background-color:lavender; border:indigo solid;
}
.graphic.CSS { -webkit-perspective:500px; perspective:500px;
}
.graphic.CSS.rotate.translate *{ -webkit-transform:translate(20px,-20px)rotate(10deg); transform:translate(20px,-20px)rotate(10deg);
}
.graphic.CSS.skewX.scale *{ -webkit-transform:skewX(20deg)scale(1.5,0.8); transform:skewX(20deg)scale(1.5,0.8);
}
.graphic.CSS.matrix *{ -webkit-transform:matrix(0.7, 0.8, 0, 0.8, 0.7, -10); transform:matrix(0.7, 0.8, 0, 0.8, 0.7, -10);
}
.graphic.CSS.spin *{ -webkit-transition:3s linear; transition:3s linear; -webkit-transform-origin:50% 50%; transform-origin:50% 50%;
}
.graphic.CSS.spin:hover *{ -webkit-transform:rotateY(360deg); transform:rotateY(360deg);
}
SVG Transform vs CSS Transform - Script Codes
SVG Transform vs CSS Transform - Script Codes
Home Page Home
Developer Amelia Bellamy-Royds
Username AmeliaBR
Uploaded September 06, 2022
Rating 3
Size 4,175 Kb
Views 36,432
Do you need developer help for SVG Transform vs CSS Transform?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Amelia Bellamy-Royds (AmeliaBR) Script Codes
Name
Positioning a Tooltip on an SVG
Using animVal to read animated SVG attributes
Motion along a closed path, arbitrary start point
Non-Scaling SVG
Cross-browser filter effects
Pastel-Dotify Filter
Normal SVG Scaling, with a viewBox
D3 Force-directed Node-link diagram
Scaling SVG elements
Autocomplete Poetry
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!