Trying to figure out how to centre this SVG text horizontally and vertically in the viewport
(The element needs to remains central across different viewport sizes)
Tried using the viewbox panning but I can't get everything aligned - part of the SVG remains cut off/incorrectly scaled
Also looking to set the font size to the same rem value as other standard text elements on the page.
SVG text is used as there's a 'slice' GSAP animation happening to it.
<div class="stage">
<svg id="demo" xmlns="http://www.w3.org/2000/svg" width="2000" height="800" viewBox="0 0 1000 800">
<defs>
<pattern id="slicePattern" patternUnits="userSpaceOnUse" width="3000" height="800" x="0" y="0"><text transform="translate(500 400)" text-anchor="middle" font-size="220" fill="#fff">SLICE</text>
</pattern>
</defs>
<g fill="url(#slicePattern)">
<polygon id="slide1" points="0,150 551,150 201,400 0,400" />
<polygon id="slide2" points="549,150 1000,400 999,400 1000,150" />
<polygon points="200,400 550,150 1000,400" />
</g>
<line x1="550" y1="150" x2="200" y2="400" stroke-width="1" stroke="white"/>
<line x1="550" y1="150" x2="1000" y2="400" stroke-width="1" stroke="white"/>
</svg>
</div>
The standard text to match to is 2.5em. Setting the SVG text to that it doesn't size the same. Also can't correctly pan the viewbox to centre the svg text in the viewport. I need this to be responsive centering also.
In short, I don't understand the effect the text transform properties are having on the element, or how this relates to the viewport/viewbox values.
For making the whole svg responsive:
svg{
width:100%;
height:auto
}
For the text, It has already text-anchor set to middle which is correct. You need to specify the position of the text by setting x and y values.
<text text-anchor="middle" x="50" y="0">The Text</text>
The font-size in svg has nothing to do with the default font-size of the css. It's relative to the viewBox of your svg. SVG functions as a separate image file. But you can have access to its style attributes by css.
Related
I want to colorize a transparent part of a svg icon from font awesome. I am using Vue Fort-Awesome package.
Here as you see inner part of icon is getting the background image of my main div. However I don't want those part to be transparent. Do you have any tricky solution for it? I know this question can be very easy but I couldn't find how to search for it on google.
<v-icon
icon="minus-circle"
class="w-6 h-6 rounded-full text-red-500"
/>
Those are technologies that I use but simple css trick can be acceptable too.
Tailwind
Vue3
FortAwesome
You can change the color of the minus or circle by changing the hex value in the fill section.
For other icons, you can change color by editing the svg file.
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" fill="#00970F"/>
<rect x="39" y="88" width="123" height="25" rx="10" fill="#FA00FF"/>
</svg>
If I use a SVG and I resize it using CSS, I get a weird effect. If I change the width, the image will take up a lot of blank space vertically. If it I change the height, the image will take a lot of blank space horizontally. How can I fix that?
#item{
width: calc(30px + 3vw);
background-color: red;
}
<svg id="item"
width="100mm"
height="100mm"
viewBox="0 0 100 99.999997"
version="1.1">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
showgrid="false"/>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-197)">
<rect
style="opacity:1;fill:#ff6600;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.56531394;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4485"
width="100"
height="100"
x="0"
y="197" />
</g>
</svg>
Note: I made the image using inkscape and got rid of the useless XML.
Resizing svg is different than regular image in jpg or png. In svg if you remove dimensions (in your case width/height set to 100mm) your svg will adapt to container width easily and generally will be scalable.
Try with this svg and you should be able to resize it with no problems using only width or height.
By the way, I minified the code and removed all unnecessary tags to focus only on relevant code. If you inline this svg into html you can also remove xmlns.
svg{width:110px} /*your custom dimensions here*/
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect style="fill:#ff6600;stroke:red;stroke-width:0.565;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0" width="100" height="100"/>
</svg>
I set a stroke color to red so you can see it. If you don't need a stroke just remove all elements with "stroke".
DEMO
Objective: I am trying to create a triangle shaped proportion less image in HTML.
My Approach: I have decided to use SVG to achieve this by creating a polygon triangle that can stretch & shrink to fit any dimension and used it as a mask on image that is suppose to fit in any dimension without loosing its own proportion.
Issue: Although the shape is working as I want but the background image stretches with the shape, is there any way I can make the image behave to something similar like css background-size: cover property.
Code:
HTML
<div id="svg-container">
<svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: whitesmoke'>
<defs>
<polygon id="mask" points="0,0 0,100 0,100 100,0" />
<pattern id="image" patternUnits="userSpaceOnUse" width="100" height="100" x="0" y="0">
<image xlink:href="http://lorempixel.com/500/500" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMinYMin slice"/>
</pattern>
</defs>
<use xlink:href="#mask" fill="url(#image)"></use>
</svg>
</div>
CSS:
#svg-container {
width: 100%;
height: 100px;
}
To check same issue using SVG image tag here.
Just as the question asks - I'm trying to figure out whether or not it's possible to use some kind of pattern or repeated background image for the stroke of an SVG path.
Is this doable? Or are you limited to colors only?
TIA!
You can use a <pattern> as a stroke e.g.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="p1" patternUnits="userSpaceOnUse" width="32" height="32">
<image xlink:href="http://phrogz.net/tmp/alphaball-small.png" width="32" height="32" />
</pattern>
</defs>
<rect stroke-width="32" stroke="url(#p1)" width="200" height="200" fill="none"/>
</svg>
The pattern can contain <svg> drawing elements or (as here) an image, or both.
You can use the property stroke-dasharray for "patterns" in the stroke:
<line stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" />
With this you can specify the length of strokes and gaps between. For some examples have a look at the MDN example page.
Is there a way in SVG to draw a line that keeps thin when the image is stretched?
I'm using a SVG image as a CSS background, something like this:
<svg ... preserveAspectRatio="none" viewBox="0 0 15 15">
<line x1="0" y1="15" x2="15" y2="0"
color="#000" stroke="#333" stroke-width="1" />
</svg>
(A diagonal line). I'm stretching this image through a rectangular element, and when the element is bigger, the line gets thicker, but I need an always-thin line.
Possible? Something like "thin" lines in flash.
In browsers that implement SVG 1.2T you can have a non-scaling stroke Opera and Webkit support this as does Firefox from version 15.
<!-- via property -->
<line … vector-effect="non-scaling-stroke" />
<!-- via CSS -->
<style>
line { vector-effect:non-scaling-stroke }
</style>
<line … />