Solution : Gives CSS - Transparent Fonts. Any Letters you Want. It's from : http://lea.verou.me/2012/05/text-masking-the-standards-way/ which some editing.
/**
* Text masking — The SVG way
*/
svg {
width: 7em; height: 3em;
font: 900 500%/1.2 'Arial Black', sans-serif;
}
text { fill: url(#wood); }
<svg>
<defs>
<pattern id="wood" patternUnits="userSpaceOnUse" width="240" height="300" >
<image xlink:href="http://hd.wallpaperswide.com/thumbs/girl_beach_background-t2.jpg" width="400" height="400" />
</pattern>
</defs>
<text y="2em">Nice Beach</text><text y="3em">Isnt't It</text>
</svg>
Code: Just change the < text.. >Change this< /text > to other words.
HTML
<svg>
<defs>
<pattern id="wood" patternUnits="userSpaceOnUse" width="240" height="300" >
<image xlink:href="http://hd.wallpaperswide.com/thumbs/girl_beach_background-t2.jpg" width="400" height="400" />
</pattern>
</defs>
<text y="2em">Nice Beach</text><text y="3em">Isnt't It</text>
</svg>
CSS:
/**
* Text masking — The SVG way
*/
svg {
width: 7em; height: 3em;
font: 900 500%/1.2 'Arial Black', sans-serif;
}
text { fill: url(#wood); }
With css. It's easy:
div {
opacity: 0.5;
}
div p {
opacity: 1.0;
}
Just change div and p for whatever you need.
/**
* Text masking — The SVG way
*/
svg {
width: 7em; height: 3em;
font: 900 500%/1.2 'Arial Black', sans-serif;
}
text { fill: url(#wood); }
<svg>
<defs>
<pattern id="wood" patternUnits="userSpaceOnUse" width="240" height="300" >
<image xlink:href="http://hd.wallpaperswide.com/thumbs/girl_beach_background-t2.jpg" width="400" height="400" />
</pattern>
</defs>
<text y="2em">Nice Beach</text><text y="3em">Isnt't It</text>
</svg>
Run code snippet
Related
I have written the SVG code below. I want to encode it with Base64 and display it with data:image/svg+xml;base64,BASE64ENCODINGHERE. The issue is probably with foreignobject but I cannot see the text on the image. How can I solve this problem?
For this case the Base64 encoding is:
PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiIHZpZXdCb3g9IjAgMCA1MDAgMjUwIj48c3R5bGU+ZGl2IHtmb250OiAxNHB4IHNlcmlmO2hlaWdodDoyMDBweDt3aWR0aDo0ODBweDttYXJnaW4tdG9wOjEwcHg7b3ZlcmZsb3c6IGF1dG87fS5iYXNlIHsgZm9udC1mYW1pbHk6IHNlcmlmOyBmb250LXNpemU6IDE0cHg7IH08L3N0eWxlPjxyZWN0IHg9IjAiIHk9IjAiIHJ4PSIxMCIgcnk9IjEwIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjI1MCIgc3R5bGU9ImZpbGw6d2hpdGU7c3Ryb2tlOmJsYWNrO3N0cm9rZS13aWR0aDo1O2ZpbGwtb3BhY2l0eTowLjE7c3Ryb2tlLW9wYWNpdHk6MC45IiAvPjxmb3JlaWdub2JqZWN0IHg9IjgiIHk9IjgiIHdpZHRoPSI0OTAiIGhlaWdodD0iMjQwIj48dGV4dCB4PSIxMCIgeT0iMTYwIiBjbGFzcz0iYmFzZSI+Q2F0ZWdvcnk6eGF4YXhhPC90ZXh0PjxkaXYgPmhlYmVsZSBodWJlbGUgYnVtIGJhbSBidW08L2Rpdj48L2ZvcmVpZ25vYmplY3Q+PC9zdmc+
So, the link becomes:
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiIHZpZXdCb3g9IjAgMCA1MDAgMjUwIj48c3R5bGU+ZGl2IHtmb250OiAxNHB4IHNlcmlmO2hlaWdodDoyMDBweDt3aWR0aDo0ODBweDttYXJnaW4tdG9wOjEwcHg7b3ZlcmZsb3c6IGF1dG87fS5iYXNlIHsgZm9udC1mYW1pbHk6IHNlcmlmOyBmb250LXNpemU6IDE0cHg7IH08L3N0eWxlPjxyZWN0IHg9IjAiIHk9IjAiIHJ4PSIxMCIgcnk9IjEwIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjI1MCIgc3R5bGU9ImZpbGw6d2hpdGU7c3Ryb2tlOmJsYWNrO3N0cm9rZS13aWR0aDo1O2ZpbGwtb3BhY2l0eTowLjE7c3Ryb2tlLW9wYWNpdHk6MC45IiAvPjxmb3JlaWdub2JqZWN0IHg9IjgiIHk9IjgiIHdpZHRoPSI0OTAiIGhlaWdodD0iMjQwIj48dGV4dCB4PSIxMCIgeT0iMTYwIiBjbGFzcz0iYmFzZSI+Q2F0ZWdvcnk6eGF4YXhhPC90ZXh0PjxkaXYgPmhlYmVsZSBodWJlbGUgYnVtIGJhbSBidW08L2Rpdj48L2ZvcmVpZ25vYmplY3Q+PC9zdmc+
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 500 250">
<style>
div {
font: 14px serif;
height: 200px;
width: 480px;
margin-top: 10px;
overflow: auto;
}
.base {
font-family: serif;
font-size: 14px;
}
</style>
<rect x="0" y="0" rx="10" ry="10" width="500" height="250" style="fill:white;stroke:black;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
<foreignobject x="8" y="8" width="490" height="240">
<text x="10" y="160" class="base">Category:xaxaxa</text>
<div>hebele hubele bum bam bum</div>
</foreignobject>
</svg>
Expected output:
enter image description here
Result I got:
enter image description here
It's foreignObject with a capital O. SVG is case sensitive except when it's embedded in HTML.
You need to specify that the div lives in the XHTML namespace
There's no such thing as a text element in HTML so if you want to keep that, move it from the foreignObject contents. I've just removed it. That gives us this...
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 500 250">
<style>
div {
font: 14px serif;
height: 200px;
width: 480px;
margin-top: 10px;
overflow: auto;
}
.base {
font-family: serif;
font-size: 14px;
}
</style>
<rect x="0" y="0" rx="10" ry="10" width="500" height="250" style="fill:white;stroke:black;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
<foreignObject x="8" y="8" width="490" height="240">
<div xmlns="http://www.w3.org/1999/xhtml">hebele hubele bum bam bum</div>
</foreignObject>
</svg>
and if you base64 encode that you get
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiIHZpZXdCb3g9IjAgMCA1MDAgMjUwIj4KICA8c3R5bGU+CmRpdiB7CiAgZm9udDogMTRweCBzZXJpZjsKICBoZWlnaHQ6IDIwMHB4OwogIHdpZHRoOiA0ODBweDsKICBtYXJnaW4tdG9wOiAxMHB4OwogIG92ZXJmbG93OiBhdXRvOwp9CgouYmFzZSB7CiAgZm9udC1mYW1pbHk6IHNlcmlmOwogIGZvbnQtc2l6ZTogMTRweDsKfQogIDwvc3R5bGU+CiAgPHJlY3QgeD0iMCIgeT0iMCIgcng9IjEwIiByeT0iMTAiIHdpZHRoPSI1MDAiIGhlaWdodD0iMjUwIiBzdHlsZT0iZmlsbDp3aGl0ZTtzdHJva2U6YmxhY2s7c3Ryb2tlLXdpZHRoOjU7ZmlsbC1vcGFjaXR5OjAuMTtzdHJva2Utb3BhY2l0eTowLjkiIC8+CiAgPGZvcmVpZ25PYmplY3QgeD0iOCIgeT0iOCIgd2lkdGg9IjQ5MCIgaGVpZ2h0PSIyNDAiPgo8ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIj5oZWJlbGUgaHViZWxlIGJ1bSBiYW0gYnVtPC9kaXY+CiAgPC9mb3JlaWduT2JqZWN0Pgo8L3N2Zz4=
Working on a project which is using a SVG mask on the homepage hero component but for some reason the text in the mask only shows when I resize the window. It's not showing on the initial page load. This is happening only in Chrome (latest version).
You can view the example on the STAGING environment here: https://staging.erwconstructions.com.au/
HTML Markup is:
<section data-component="mask-hero" class="in-view mask-hero">
<picture>
<img src="https://staging.erwconstructions.com.au/wp-content/uploads/2020/07/home-hero.jpg" alt="Home">
<svg width="100%" height="100%" viewBox="0 0 100% 100%">
<defs>
<linearGradient id="gradient">
<stop offset="100%" stop-color="black" />
</linearGradient>
<mask id="mask">
<rect width="100%" height="100%" fill="#fff" />
<text x="0" y="50%">
<tspan x="5vw" dy="-.1em">Building</tspan>
<tspan x="5vw" dy="1em">Redefined</tspan>
</text>
</mask>
</defs>
<rect width="100%" height="100%" fill="url(#gradient)" fill-opacity="0.9" mask="url(#mask)" />
</svg>
</picture>
</section>
The CSS is:
[data-component="mask-hero"] {
height: 100vh;
padding: 0;
background: none;
& picture {
display: block;
height: 100vh;
& img {
height: 100%;
object-fit: cover;
object-position: center;
position: fixed;
will-change: transform;
width: 100%;
z-index: -1;
}
& svg {
display: block;
height: 100%;
}
& text {
font-family: var(--defaultFont);
font-weight: var(--bold);
font-size: 3em;
#media (--app-breakpoint-2) {
font-size: 6em;
}
#media (--app-breakpoint-4) {
font-size: 8em;
}
#media (--app-breakpoint-5) {
font-size: 14em;
}
}
}
}
For some reason there is also a console error regarding the viewBox, even though the correct attributes are set on the SVG:
Error: <svg> attribute viewBox: Expected number, "0 0 100% 100%".
Any help would be greatly appreciated.
Thanks,
Dayne
By the given error, I'd guess to problem is with the viewBox. It should be given an absolute number in px, not percent. Like <svg viewBox="0 0 100 100">
Have you tried using javascript to make it work ?
This code below adds background color to white on rect inside svg code to show the text when the page has loaded.
var svgRect = document.querySelector('svg rect');document.addEventListener("DOMContentLoaded", function(){ setTimeout(function() { svgRect.style.backgroundColor = 'white'; }, 500); });
I have a an SVG of text and a mask (animating the mask later on) that I'd initially like to have a fill of white. However, when I set the fill to white, the text goes missing as if the color is transparent instead. Here is the relevant code...
svg {
margin: 0;
color: rgba(255, 255, 255, 1);
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
}
rect {
-webkit-mask: url(#mask);
mask: url(#mask);
fill: #f00;
}
defs {
mask {
text {
font-size: 8vw;
/* Using black to illustrate text fill isn't updating */
fill: #000;
}
}
}
#editText {
#media screen and (max-width: 480px) {
transform: translateY(-10%);
}
}
<svg preserveAspectRatio="xMinYMin meet">
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%"></rect>
<text x="50%" y="50vh" text-anchor="middle">
Text line 1
</text>
<text
id="editText"
x="50%"
y="65vh"
text-anchor="middle"
>
Text line 2
</text>
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%"></rect>
</svg>
Here is how it looks locally...
Here is how it should look (with white text instead of being transparent)
I've tried a combination of strokes, colors and gradients on the text element with no luck. Any ideas on where I'm going wrong?
If I understand correctly, you want to use the mask to cut the rectangle with the shape of the text so that you can see what is below that cutout. If that is the case, the main issue I see is with the css selectors. You have one selector for all rect elements in the page, which includes the element of the mask. I think you need to make sure that you are affecting only the elements you want to affect. For instance, you can use id and class selectors:
svg {
margin: 0;
color: rgba(255, 255, 255, 1);
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
}
#background{
fill: #ff0;
}
#outrect {
-webkit-mask: url(#mask);
mask: url(#mask);
fill: #f00;
}
.masktext{
stroke: #000;
}
#maskrect{
fill: #fff;
}
#editText {
#media screen and (max-width: 480px) {
transform: translateY(-10%);
}
}
<svg preserveAspectRatio="xMinYMin meet">
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%">
<rect id="maskrect" x="0" y="0" width="100%" height="100%"></rect>
<text class="masktext" x="50%" y="50vh" text-anchor="middle">
Text line 1
</text>
<text
id="editText"
class="masktext"
x="50%"
y="65vh"
text-anchor="middle"
>
Text line 2
</text>
</mask>
</defs>
<rect id="background" x="0" y="0" width="100%" height="100%"></rect>
<rect id="outrect" x="0" y="0" width="100%" height="100%"></rect>
</svg>
I also added a yellow rectangle below to see that transparency. Now you can modulate the transparency by changing the color of .masktext and #maskrect.
I created a CodePen using SVG and SCSS to style two cards in Chrome, and everything displays properly there. However, The internal shapes won't fully display on Edge and Firefox. I tried only using the compiled CSS, but that doesn't fix it. What am I doing wrong? Here is the HTML and compiled CSS:
.svgcontainer {
width: 100px;
height: 140px;
border: 1px solid;
border-radius: 10%;
}
#card1 {
background: lime;
}
.rect1 {
fill: red;
width: 50px;
height: 50px;
}
.poly1 {
fill: #fca456;
}
#card2 {
background: #cd1bc9;
}
.rect2 {
fill: silver;
width: 25px;
height: 140px;
}
.ellipse2 {
fill: green;
}
.polygon2 {
fill: #fa4567;
}
.bigshape2 {
width: 100px;
height: 140px;
}
<svg id="card1" class="svgcontainer">
<defs>
<pattern id="shape-pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50">
<rect class="rect1" x="0" y="0" rx="10" ry="10" />
<polygon class="poly1" points="25,15 30,20 25,25 20,20" />
</pattern>
</defs>
<!-- use pattern in a circle -->
<circle class="large-shape" cx="50" cy="70" r="75" fill="url(#shape-pattern)" />
</svg>
<svg id="card2" class="svgcontainer">
<defs>
<pattern id="internal-pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50">
<rect class="rect2" x="12" y="0" />
<ellipse class="ellipse2" cx="25" cy="22" rx="10" ry="18" />
<polygon class="polygon2" points="20,10 30,10 25,40" />
</pattern>
</defs>
<rect class="bigshape2" x="0" y="0"
fill="url(#internal-pattern)" />
</svg>
Firefox does not support the SVG 2 change which allows elements to have sizing set via CSS. Presumably neither does Edge.
Setting width and height via attributes works everywhere.
.svgcontainer {
width: 100px;
height: 140px;
border: 1px solid;
border-radius: 10%;
}
#card1 {
background: lime;
}
.rect1 {
fill: red;
}
.poly1 {
fill: #fca456;
}
#card2 {
background: #cd1bc9;
}
.rect2 {
fill: silver;
}
.ellipse2 {
fill: green;
}
.polygon2 {
fill: #fa4567;
}
<svg id="card1" class="svgcontainer">
<defs>
<pattern id="shape-pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50">
<rect class="rect1" x="0" y="0" width="50" height="50" rx="10" ry="10" />
<polygon class="poly1" points="25,15 30,20 25,25 20,20" />
</pattern>
</defs>
<!-- use pattern in a circle -->
<circle class="large-shape" cx="50" cy="70" r="75" fill="url(#shape-pattern)" />
</svg>
<svg id="card2" class="svgcontainer">
<defs>
<pattern id="internal-pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50">
<rect class="rect2" x="12" y="0" width="25" height="140" />
<ellipse class="ellipse2" cx="25" cy="22" rx="10" ry="18" />
<polygon class="polygon2" points="20,10 30,10 25,40" />
</pattern>
</defs>
<rect class="bigshape2" x="0" y="0" width="100" height="140"
fill="url(#internal-pattern)" />
</svg>
How do I out an icon (e.g. font-awesome) into an SVG element?
I want that this is centered in the circle.
<svg class="svg" width=100 height=100>
<circle cx=50 cy=50 r=25>
</circle>
<i class="icon-check"></i>
</svg>
Here is a test:
http://jsfiddle.net/L2Lm3fgm/
Just find out the code for the character font-awesome is using in its class, and use that character as a text node. Remember to group the circle and the text node together.
Example:
svg {
margin: 24px auto;
display: block;
}
circle {
fill: transparent;
stroke: #f00;
stroke-width: 2;
}
svg text#chk {
font-family: sans-serif;
font-size: 24px;
fill: #00f;
}
<svg class="svg" width=100 height=100>
<g>
<circle cx=50 cy=50 r=25></circle>
<text id="chk" x=42 y=58>✓</text>
</g>
</svg>
Example Fiddle: http://jsfiddle.net/abhitalks/L2Lm3fgm/2/