I'm trying to put my text centered to triangle, I tried to make the position absolute and then top:0; right:0; left:0; bottom:0; nothing changed.
<svg class="intro go" viewbox="0 0 200 86">
<text text-anchor="start" x="10" y="30" class="text text-stroke" clip-path="url(#text1)">TEST</text>
<text text-anchor="start" x="10" y="30" class="text text-stroke text-stroke-2" clip-path="url(#text1)">TEST</text>
<defs>
<clipPath id="text1">
<text text-anchor="start" x="10" y="30" class="text">TEST</text>
</clipPath>
</defs>
</svg>
here is my code: https://codepen.io/anon/pen/ePEdEZ
I'm not sure what you meant by "centered to triangle"?
Did you mean centered to rectangle? If so:
Change the coordinates of the text from x="10" y="30" to x="100" y="43".
Then set text-anchor="start" to text-anchor="middle". And add alignment-baseline="middle" to your text. The text is now centered in the box.
Here is a JSFiddle: https://jsfiddle.net/1mLey8v4/
You could also set alignment-baseline and text-anchor by scss.
Looks cool btw!
Related
I want to apply a single css rotation transformation to a set of elements in an SVG, such that each element is rotated independently, without having to calculate the centre of each element in the css. For example, I have an SVG that looks like the picture on the left, and want to apply css to achieve the effect on the right
I'm writing the svg myself, and am creating something like this
<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg">
<text transform="translate(50 100)" text-anchor="middle">Text 1</text>
<text transform="translate(100 100)" text-anchor="middle">Text 2</text>
</svg>
When I apply a css rotation, e.g. by inserting <style>text {transform: rotate(10deg)}</style>, it seems to overwrite the first transformation, and the rotated text is placed in the top left corner:
I can modify the svg to use `x="X" y="Y" instead of a transform attribute, but that results in the transformation being applied around a different centre instead:
<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg">
<style>text {transform: rotate(10deg)}</style>
<text x="50" y="100" text-anchor="middle">Text 1</text>
<text x="100" y="100" text-anchor="middle">Text 2</text>
</svg>
How can I structure the svg so that I can apply a rotation which works independently on each element without overwriting the initial transform?
This is a possible solution:
-The text has x="0" y="0" and is rotated with CSS.
-You put the text in the <defs>.
-You use the text and the <use> element has the x and y values you need.
text{transform:rotate(90deg)}
<svg baseProfile="full" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<text id="a" text-anchor="middle" >Text 1</text>
<text id="b" text-anchor="middle" >Text 2</text>
</defs>
<use xlink:href="#a" x="50" y="50" />
<use xlink:href="#b" x="100" y="50" />
</svg>
Yet another solution (inspired by the comment of Robert Longson) would wrapping the rotated text in a g element and translate the g
text{transform:rotate(90deg)}
<svg baseProfile="full" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(50,50)"><text text-anchor="middle" >Text 1</text></g>
<g transform="translate(100,50)"><text text-anchor="middle" >Text 2</text></g>
</svg>
I have a polygon with a shape of a triangle. But the text inside of the polygon is not rendering. Any help is appreciated. This is what I tried so far, and I am not able to figure out why the text isn't rendering. Can I actually place a text inside of a polygon with points like this?
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 64 64">
<polygon fill="#F3BC23" stroke="#F3BC23" stroke-width="1" points="30,4 4,60 60,60"/><polygon>
<text x="10" y="14" text-anchor="middle" fill="white" font-size="10"></text>
Thanks in advance.
There are a number of problems with your SVG.
The points attribute in the <polygon> wasn't formatted properly. It is missing commas.
You had a stray <polygon> tag at the end of that line.
You had no text in your <text> element.
The position of the text was not over the polygon. White text on a white background would be invisible.
I also increased the font-size so that the text was visible.
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 64 64">
<polygon fill="#F3BC23" stroke="#F3BC23" stroke-width="1" points="30,4,4,60,60,60"/>
<text x="32" y="50" text-anchor="middle" fill="white" font-size="30">X</text>
</svg>
You Can Use the <text>
Here is Your Code
<svg>
<text x="10" y="10">text</text>
</svg>
How can I clip an image to text? I would prefer a method that is available in any browser. I tried background-clip but it not available in all modern browsers.
Add a clip-path to an image and you'll see a clipped image.
I've made it look more like your example by adding an additional copy of the image with low opacity behind the clipped image.
<svg width="100%" height="100%">
<defs>
<clipPath id="sample" clipPathUnits="userSpaceOnUse">
<text x="85" y="330" font-family="sans-serif" font-size="380" font-weight="bold">I CAM</text>
</clipPath>
</defs>
<image transform="scale(0.4)" xlink:href="http://netghost.narod.ru/gff/sample/images/png/marble24.png" x="20" y="20" width="1419" height="1001" opacity="0.3" />
<image transform="scale(0.4)" xlink:href="http://netghost.narod.ru/gff/sample/images/png/marble24.png" x="20" y="20" width="1419" height="1001" clip-path="url(#sample)" />
</svg>
I have several svg rectangles with an hover effect, the background-color of the rectangles gets changed when the mouse is over them. The hover effect is set via css:
.myclass:hover {
fill: rgb(255,128,0);
}
Apart from that, text is placed above each of the rectangles. A pair of text and rectangle define a group.
<g>
<rect class="myclass" x="10" y="10" width="40" height="40" />
<text x="30" y="40" font-family="Verdana" font-size="10" fill="blue">ESC</text>
</g>
The hover effect works fine, but only if the cursor is not exactly above the text. If it is exactly above the text, then the hover effect vanishes.
How could I fix that?
Here a screenshot: on the left you can see the hover effect (background is orange), on the right you can see how the effect vanishes if the cursor hits the text on the rectangle:
Thank you
You need to make the text have pointer-events="none" so that it's ignored by the hover.
<g>
<rect class="myclass" x="10" y="10" width="40" height="40" />
<text x="30" y="40" font-family="Verdana" font-size="10" fill="blue" pointer-events="none">ESC</text>
</g>
The problem is the hover is assigned to element that sits behind the text. So when you're hovering over the text, you're technically NOT touching the background anymore.
My suggestion would be to apply the class to the parent element, and assign the hover to that.
<g class="myclass">
<rect x="10" y="10" width="40" height="40" />
<text x="30" y="40" font-family="Verdana" font-size="10" fill="blue">ESC</text>
</g>
Now your CSS would look like this, to target the child "rect" element:
.myclass:hover rect {
fill: rgb(255,128,0);
}
Is it possible to have background for text in svg or css? it means , every character have background?
here is the example:
I have made this in photoshop and made a mask, i just wonder i it is possible in svg or css?
Here is an example using a pattern. It uses <tspan> elements with patterned fill to show you how this may be done on a per-character basis, if desired:
Demo: http://jsfiddle.net/xWNR3/2/
<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink">
<style>
svg { background:#ddd }
text {
font-family:Verdana; font-size:160pt; font-weight:bold;
stroke:#000;
}
</style>
<defs>
<pattern id="p1" patternUnits="userSpaceOnUse" width="32" height="32">
<image x:href="alphaball.png" width="32" height="32" />
</pattern>
<pattern id="p2" patternUnits="userSpaceOnUse" width="10" height="10">
<image x:href="grid.gif" width="10" height="10" />
</pattern>
</defs>
<text x="20" y="170" fill="url(#p1)">
Hello
<tspan x="20" y="350"
fill="url(#p2)">Wo<tspan fill="url(#p1)">r</tspan>ld</tspan>
</text>
</svg>
You can use a mask or a clipPath to do this too, in addition to the way with patterns as in the answers robertc suggested.
Here's an example from the svg testsuite using clipPath.