I'm tring to have an effect on a picture in my website, the effect is "Image revealing from text on hover
" from this website.
I made a CSS file with this code:
body, html {
height: 100%;
margin: 0;
padding: 0;
background: #E3DFD2
}
effecrforthelogo {
background: url('http://www.uploads.co.il/uploads/images/607163485.png');
background-size: cover;
width: 40vmin;
height: auto;
display: block;
margin: 30vmin auto;
}
text {
font-size: 10px;
transition: font-size .4s ease-out;
font-weight: 900;
font-family: arial;
}
effectforthelogo:hover text {
transition: font-size .4s ease-in;
font-size: 300px;
}
and in my aspx file of the page in my wesite I wrote this HTML code:
<efectforthelogo viewbox="0 0 50 50" width="50" height="50">
<defs>
<mask id="mask" x="0" y="0" width="100" height="49">
<rect x="0.5" y="0.5" width="49" height="49" fill="#fff"/>
<text x="20" text-anchor="middle" y="50" dy="0">S</text>
<text x="25" id="ltrV" text-anchor="middle" y="50" dy="0">V</text>
<text x="30" text-anchor="middle" y="50" dy="0">G</text>
</mask>
</defs>
<rect x="0.5" y="0.5" width="49" height="49" mask="url(#mask)" fill-opacity="1" fill="#E3DFD2"/>
</efectforthelogo>
All it shows is "SVG" on the top of the page, without the picture/the effect.
Please help!
I wanted to see the picture woth the effect, but it only showd the text.
Related
From this example, I am trying to dim (i.e. reduce opacity) non-hover elements of a html page.
The code below works only for non-overlapping elements. However, if the page contains an element that overlaps in the background, and that I do not want any effect on it when hover (e.g. green square below), the "hoverable" elements of interest (e.g. red circle and blue rectangle below) are dimmed when they are not hover, but when the cursor is still on the background shape.
In other words:
. green square: not "hoverable" (should not have any effect when hover)
. red circle: "hoverable" (i.e. dim all other elements when hover, i.e. blue rectangle and green square)
. blue rectangle: "hoverable" (i.e. dim all other elements when hover, i.e. red circle and green square)
How could I skip dimming all elements when hover the green square?
.parent:hover .child {
opacity: 0.2;
transition: all .3s;
}
.parent .child:hover {
opacity: 1;
transition: all .3s;
}
<svg width="250" height="250">
<g class="parent">
<rect x="0" y="0" width="150" height="150" fill="green"/>
<g class="child">
<circle cx="30" cy="45" r="25" fill="red"/>
</g>
<g class="child">
<rect x="60" y="80" width="60" height="30" fill="blue"/>
</g>
</g>
</svg>
Your only hope (I think) is to use pointer-events: none.
But this will avoid any pointer interaction with the element
.parent:hover .child {
opacity: 0.2;
transition: all .3s;
}
.parent .child:hover {
opacity: 1;
transition: all .3s;
}
.nohover {
pointer-events: none;
}
<svg width="250" height="250">
<g class="parent">
<rect class="nohover" x="0" y="0" width="150" height="150" fill="green"/>
<g class="child">
<circle cx="30" cy="45" r="25" fill="red"/>
</g>
<g class="child">
<rect x="60" y="80" width="60" height="30" fill="blue"/>
</g>
</g>
</svg>
The easiest option is to move your filled rectangle outside of the .parent, at which point the existing CSS will work as intended as the .parents opacity is not being applied to the green background.
.parent:hover .child {
opacity: 0.2;
transition: all .3s;
}
.parent .child:hover {
opacity: 1;
transition: all .3s;
}
<svg width="250" height="250">
<rect x="0" y="0" width="150" height="150" fill="green"/>
<g class="parent">
<g class="child">
<circle cx="30" cy="45" r="25" fill="red"/>
</g>
<g class="child">
<rect x="60" y="80" width="60" height="30" fill="blue"/>
</g>
</g>
</svg>
Try like this:
.parent:hover .child {
opacity: 0.2;
transition: all .3s;
}
.parent:hover rect:hover ~.child,
.parent .child:hover {
opacity: 1;
transition: all .3s;
}
<svg width="250" height="250">
<g class="parent">
<rect x="0" y="0" width="150" height="150" fill="green"/>
<g class="child">
<circle cx="30" cy="45" r="25" fill="red"/>
</g>
<g class="child">
<rect x="60" y="80" width="60" height="30" fill="blue"/>
</g>
</g>
</svg>
As the rect element is before the .child elements, it is possible to check for its :hover in addition to .parent:hover and then style the .child elements accordingly.
I'm creating a small stacked bar graph, with 3 bar items (rendered with a coloured <rect> item). This is all done in a React component (I build these up depending on some of the inputs I get). The render function for the component looks something like this:
<React.Fragment>
<g key={this.props.id}>
<rect
width={`${
this.props.value === 0 ? 2 : this.calculatePercentage(this.props.value)
}%`}
height={`15px`}
x={`${this.getPosition()}%`}
style={{ fill: this.props.color }}
className={Styles.bar}
/>
<text
y={25}
x={`${this.getPosition()}%`}
transform={`translate(${this.getTextPosition()}, 0)`}
>
<a
onClick={this.onClick}
className={
this.props.value === 0
? Styles.noResults
: this.props.isSelected
? Styles.selectedText
: Styles.filterText
}
>
{this.props.label}
</a>
</text>
</g>
<text
id={"percentage"}
className={Styles.barText}
x={`${this.getPosition() + 1}%`}
y={11}
transform={`translate(${0}, 0)`}
>
{this.calculatePercentage(this.props.value)}%
</text>
<use xlinkHref="#percentage" />
</React.Fragment>
Ultimately, for a result-set I have, the output from this component looks like this:
.container {
display: flex;
flex-direction: column;
}
.bar {
overflow: visible;
}
.barText {
fill: #000;
color: #000;
font-size: 10px;
overflow: visible;
}
.noResults {
fill: #bcbcbc;
font-size: 10px;
}
.noResults:hover {
cursor: default;
}
.selectedText {
fill: #0078d7;
font-size: 10px;
text-decoration: underline !important;
text-decoration-color: #0078d7;
text-decoration-thickness: 1px;
font-weight: bold;
}
.filterText {
fill: #0078d7;
font-size: 10px;
text-decoration: none;
}
.filterText:hover {
cursor: pointer;
text-decoration: underline !important;
text-decoration-color: #0078d7;
text-decoration-thickness: 1px;
}
<svg xmlns="http://www.w3.org/2000/svg" class="container">
<g>
<rect class="bar" style="fill: #2a7c4f;" x="0%" width="2%" height="15px" />
<text transform="translate(0)" x="0%" y="25"><a class="noResults">Complete: 0</a></text>
</g>
<text id="percentage" class="barText" transform="translate(0)" x="1%" y="11">0%</text>
<g>
<rect class="bar" style="fill: #fec42e;" x="2%" width="2%" height="15px" />
<text transform="translate(53.91)" x="2%" y="25"><a class="noResults">Draft: 0</a></text>
</g>
<text id="percentage" class="barText" transform="translate(0)" x="7%" y="11">48%</text>
<g>
<rect class="bar" style="fill: #D3D3D3;" x="4%" width="100%" height="15px" />
<text transform="translate(253.91)" x="2%" y="25"><a class="noResults">Empty: 0</a></text>
</g>
<text id="percentage" class="barText" transform="translate(0)" x="91%" y="11">50%</text>
<use xlink:href="#percentage"/>
</svg>
Now as you can see, the second 0% isn't visible, what I want is for all the % value fields to be visible on top of the bar itself. Is there any way to go about this? It obviously works if the particular section of the bar has a larger width, but I want it to work regardless of the width of the rect.
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.
What I want to happen is when you roll over the image, the vector shows up but I also want text to show up as well. Right now, the text is there but it's consistently there. I only want it to appear when you hover over the image.
svg{
background:url('https://vignette.wikia.nocookie.net/lunifer-kingdom/images/f/fb/Wolf_howling_at_moon.jpg/revision/latest?cb=20140105045552');
background-size:cover;
width:40vmin; height:auto;
display:block;
}
h5 {
height: auto;
width: 280px;
padding: 10px;
color: white;
margin-top: -105px;
font-size: 15px;
}
text {
font-size:350px;
transition:font-size .4s ease-out;
font-weight:900;
font-family:arial;
}
svg:hover text{
transition:font-size .4s ease-in;
font-size: 10px;
}
<svg viewbox="0 0 50 50" width="50" height="50">
<defs>
<mask id="mask" x="0" y="0" width="100" height="49">
<rect x="0.5" y="0.5" width="49" height="49" fill="#fff"/>
<text x="18" text-anchor="middle" y="50" dy="0">D</text>
<text x="23" id="ltrV" text-anchor="middle" y="50" dy="0">A</text>
<text x="28" text-anchor="middle" y="50" dy="0">R</text>
<text x="33" text-anchor="middle" y="50" dy="0">K</text>
</mask>
</defs>
<rect x="0.5" y="0.5" width="49" height="49" mask="url(#mask)" fill-opacity="1" fill="#C0C0C0"/>
<div id="overlay">
<h5><center>text</center></h5>
</svg>
Here is the fiddle to solve your problem.
Solution fiddle link
Further I'd like to inform you that, in your layout you have put HTML div tag inside SVG tag, which is not a good approach. Even in must have case, you should add HTML tags inside SVG using foreignObject element. Please refer this link for more info on this :https://bl.ocks.org/Jverma/2385cb7794d18c51e3ab
What I did is put this code outside SVG and gave it opacity 0:
<div id="overlay">
<h5><center>text</center></h5>
</div>
And making opacity 1 on hover using this code:
svg:hover ~ #overlay {
transition: opacity .7s ease-in;
opacity: 1;
}
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>