I am trying to draw a board composed with hexagons using only HTML and CSS.
It's a React app.
My problem is with the "hitbox" of these hexagons being rectangular. Is there a way to have my onClick hitbox to perfectly fit my hexagons?
React.JS code:
<div className={`land${getClassNames(landState)}`}>
<svg
viewBox="0 0 100 100"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<polygon points="50 1 95 25 95 75 50 99 5 75 5 25"
onClick={() => handleClick(index, selectLand, landState)} />
</svg>
CSS
.land {
float: left;
margin-left: -5px;
margin-bottom: -32px;
width: 140px;
}
.land svg {
width: 100%;
}
.land.isVacant svg {
fill : #e0e0e0;
}
.land.isOccupiedByPlayer1 svg {
fill : #90caf9;
}
.land.isOccupiedByPlayer2 svg {
fill : #ef9a9a;
}
.active svg:hover {
cursor: pointer;
}
EDIT:
Moving the onClick on the polygone gave me a beter result, but still not perfect and strange. I highlighted the unclickable zone on the following image. I don't understant this.
.board {
float: left; width: 1200px;
}
.land-row {
clear: left;
}
.land-row.three {
margin-left: 135px;
}
.land-row.four {
margin-left: 67px;
}
.land {
float: left;
margin-left: -5px;
margin-bottom: -32px;
width: 140px;
}
.land svg {
width: 100%;
height: 100%;
}
.land.isVacant svg {
fill : #e0e0e0;
}
.land.isOccupiedByPlayer1 svg {
fill : #90caf9;
}
.land.isOccupiedByPlayer2 svg {
fill : #ef9a9a;
}
.active svg:hover {
cursor: pointer;
}
**EDIT:**<br>
<div id="root"><div class="App"><div class="board"><div class="land-row three"><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div></div><div class="land-row four"><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isOccupiedByPlayer1"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div></div><div class="land-row"><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div></div><div class="land-row four"><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isOccupiedByPlayer1"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div></div><div class="land-row three"><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div><div class="land isOccupiedByPlayer2"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div></div></div></div></div>
All SVG elements are not rectangular. And your hexagon polygon is also not rectangular. In my demo below you will see it. On the following screenshot of my demo:
you can see some yellow and red points. If you click on this points (areas) in my demo (but not on screenshot!) then you will see that this elements are not rectangular.
Interactive demo
document.querySelector('svg').onclick = function(e)
{
if(e.target.tagName == 'polygon')
state.innerText = 'Congratulation! You clicked on polygon element.';
else if(e.target.tagName == 'circle')
state.innerText = 'You clicked on circle element.';
else
state.innerText = 'Bad result! You clicked on SVG, but NOT on polygon element.';
};
<svg width="150" height="150" viewBox="0 0 100 100" style="background:#048">
<polygon points="50 1 95 25 95 75 50 99 5 75 5 25"/>
<circle cx="50" cy="50" r="30" fill="green"/>
</svg>
<div id="state"></div>
UPDATE
Now you have added the HTML code and we can see your problem: you have for each polygon element one SVG wich is inside the div element. In the developer view it looks like on this screenshot:
Your polygon element is not rectangular, but it is inside the div element from class land. To solve this issue you can deactivate mouse events from div.land with .board .land{pointer-events: none} and because now mouse events from full div element (inclusive SVG with polygon) are deactivated you have to activate mouse events for polygon elements with .board polygon{pointer-events: all}. And after this CSS adding it works.
document.querySelector('.board').onclick = function(e)
{
if(e.target.tagName == 'polygon')
{
var parentDivCL = e.target.closest('.land').classList;
if(parentDivCL.contains('isVacant'))
{
parentDivCL.remove('isActive', 'isVacant');
parentDivCL.add('isOccupiedByPlayer1');
}
}
};
.board .land{pointer-events: none}
.board polygon{pointer-events: all}
.board {
float: left; width: 1200px;
}
.land-row {
clear: left;
}
.land-row.three {
margin-left: 135px;
}
.land-row.four {
margin-left: 67px;
}
.land {
float: left;
margin-left: -5px;
margin-bottom: -32px;
width: 140px;
}
.land svg {
width: 100%;
height: 100%;
}
.land.isVacant svg {
fill : #e0e0e0;
}
.land.isOccupiedByPlayer1 svg {
fill : #90caf9;
}
.land.isOccupiedByPlayer2 svg {
fill : #ef9a9a;
}
.active svg:hover {
cursor: pointer;
}
<div id="root">
<div class="App">
<div class="board">
<div class="land-row three">
<div class="land isActive isVacant">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
<div class="land isActive isVacant">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
<div class="land isActive isVacant">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
</div>
<div class="land-row four">
<div class="land isActive isVacant">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
<div class="land isActive isVacant">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
<div class="land isOccupiedByPlayer1">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
<div class="land isActive isVacant">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
</div>
<div class="land-row">
<div class="land isActive isVacant">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
<div class="land isActive isVacant">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
<div class="land isActive isVacant">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
<div class="land isActive isVacant">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
<div class="land isActive isVacant">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
</div>
<div class="land-row four">
<div class="land isActive isVacant">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
<div class="land isActive isVacant">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
<div class="land isActive isVacant">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
<div class="land isOccupiedByPlayer1">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
</div>
<div class="land-row three">
<div class="land isActive isVacant">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
<div class="land isActive isVacant">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
<div class="land isOccupiedByPlayer2">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg>
</div>
</div>
What you are describing should be the default for click handlers attached to an SVG shape.
<svg viewBox="0 0 100 100">
<polygon points="50 1 95 25 95 75 50 99 5 75 5 25"
onclick="console.log('You have clicked the polygon.')" />
</svg>
Update. Here is the same thing with your updated code, and some pointer-events properties added to the svgs, polygons and divs.
document.querySelectorAll('polygon').forEach(polygon => {
polygon.addEventListener('click', e => {
e.target.closest('.land').classList.add('isOccupiedByPlayer1')
})
})
.board {
float: left;
width: 1200px;
}
.land-row {
clear: left;
}
.land-row.three {
margin-left: 135px;
}
.land-row.four {
margin-left: 67px;
}
.land {
float: left;
margin-left: -5px;
margin-bottom: -32px;
width: 140px;
}
.land svg {
width: 100%;
height: 100%;
}
.land.isVacant svg {
fill: #e0e0e0;
}
.land.isOccupiedByPlayer1 svg {
fill: #90caf9;
}
.land.isOccupiedByPlayer2 svg {
fill: #ef9a9a;
}
.active svg:hover {
cursor: pointer;
}
div,
svg {
pointer-events: none;
}
polygon {
pointer-events: fill;
}
<div id="root">
<div class="App">
<div class="board">
<div class="land-row three">
<div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
<div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
<div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
</div>
<div class="land-row four">
<div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
<div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
<div class="land isOccupiedByPlayer1"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
<div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
</div>
<div class="land-row">
<div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
<div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
<div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
<div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
<div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
</div>
<div class="land-row four">
<div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
<div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
<div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
<div class="land isOccupiedByPlayer1"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
</div>
<div class="land-row three">
<div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
<div class="land isActive isVacant"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
<div class="land isOccupiedByPlayer2"><svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="50 1 95 25 95 75 50 99 5 75 5 25"></polygon></svg></div>
</div>
</div>
</div>
</div>
Related
When hovering over the arrow-icon of the button, for one moment, the text on the right side appears and the arrow-icon changes back to the chevron-icon. It seems like the "mouseout" event fires, even though I'm still hovering over the button. How do I prevent this?
const inviteButton = document.querySelector("#invite-btn button");
const inviteSpanOut = document.getElementById("span-out")
//Changes icon to arrow
inviteButton.addEventListener("mouseover", function() {
inviteButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>`
inviteSpanOut.style.display = "none";
});
//Changes icon to chevron
inviteButton.addEventListener("mouseout", function() {
inviteButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>`
inviteSpanOut.style.display = "inline";
});
#invite-btn {
text-decoration: none;
font-size: 1rem;
}
#invite-btn button {
border-radius: 3rem;
width: 50px;
height: 50px;
border: 0;
background-color: hsla(0, 0%, 10%, 1);
transition: 0.3s ease-out;
}
#invite-btn button:hover {
width: 200px;
}
#invite-btn span {
padding-left: 10px;
font-weight: 600;
letter-spacing: 1px;
transition: 0.3s ease-out;
}
<a id="invite-btn">
<button> <!-- Chevron-Icon-->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</button>
<span id="span-out">INVITE NOW</span>
</a>
Easily countered by using pointer-events: none on the SVG itself. See updated example below.
Good luck!
const inviteButton = document.querySelector("#invite-btn button");
const inviteSpanOut = document.getElementById("span-out")
inviteButton.addEventListener("mouseover", function() {
inviteButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>`
inviteSpanOut.style.display = "none";
});
inviteButton.addEventListener("mouseout", function() {
inviteButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>`
inviteSpanOut.style.display = "inline";
});
#invite-btn {
text-decoration: none;
font-size: 1rem;
}
#invite-btn button {
border-radius: 3rem;
width: 50px;
height: 50px;
border: 0;
background-color: hsla(0, 0%, 10%, 1);
transition: 0.3s ease-out;
}
#invite-btn button svg {
pointer-events: none;
}
#invite-btn button:hover {
width: 200px;
}
#invite-btn span {
padding-left: 10px;
font-weight: 600;
letter-spacing: 1px;
transition: 0.3s ease-out;
}
<a id="invite-btn">
<button> <!-- Chevron-Icon-->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</button>
<span id="span-out">INVITE NOW</span>
</a>
Remove pointer events from the SVG and it seems to work well.
Also, anchors and buttons have distinct purposes and should never be combined.
Finally, use classes for CSS to make it reusable. I didn't fully convert your script for reusability, but it wouldn't be too difficult.
const inviteButton = document.querySelector(".invite-btn");
const inviteSpanOut = document.querySelector(".span-out")
inviteButton.addEventListener("mouseover", function() {
inviteButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>`
inviteSpanOut.style.display = "none";
});
inviteButton.addEventListener("mouseout", function() {
inviteButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>`
inviteSpanOut.style.display = "inline";
});
.invite-btn {
border-radius: 3rem;
width: 50px;
height: 50px;
border: 0;
background-color: hsla(0, 0%, 10%, 1);
transition: 0.3s ease-out;
}
.invite-btn:hover {
width: 200px;
}
.invite-btn:hover + .span-out {
padding-left: 10px;
font-weight: 600;
letter-spacing: 1px;
transition: 0.3s ease-out;
}
.invite-btn svg {
pointer-events: none;
}
<button class="invite-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</button>
<span class="span-out">INVITE NOW</span>
Example: last.fm
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, 0.1);
border: solid rgba(0, 0, 0, 0.15);
border-width: 1px 0;
box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1), inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -0.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
body {
font-family: "Nunito", sans-serif;
background-color: #151b29;
}
a {
text-decoration: none;
}
.container {
max-width: 960px;
}
.navLinks {
color: white;
transition: color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.navLinks:hover {
color: #ffa260;
transform: translateY(-0.25em);
}
.osquinnHeader {}
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
<symbol id="home" viewBox="0 0 16 16">
<path
d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"
/>
</symbol>
<symbol id="speedometer2" viewBox="0 0 16 16">
<path
d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"
/>
<path
fill-rule="evenodd"
d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"
/>
</symbol>
<symbol id="table" viewBox="0 0 16 16">
<path
d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"
/>
</symbol>
<symbol id="people-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
<path
fill-rule="evenodd"
d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"
/>
</symbol>
<symbol id="grid" viewBox="0 0 16 16">
<path
d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"
/>
</symbol>
</svg>
<header>
<div class="px-3 py-2 text-bg-dark osquinnHeader">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<h4 class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
Osquinn Fan Club
</h4>
<ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
<li>
<a href="#" class="nav-link navLinks">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#home" />
</svg> Home
</a>
</li>
<li>
<a href="#" class="nav-link navLinks">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#speedometer2" />
</svg> Dashboard
</a>
</li>
<li>
<a href="#" class="nav-link navLinks">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#table" />
</svg> Orders
</a>
</li>
<li>
<a href="#" class="nav-link navLinks">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#grid" />
</svg> Products
</a>
</li>
<li>
<a href="#" class="nav-link navLinks">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#people-circle" />
</svg> Customers
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
I've tried adding the <img> tag after the osquinnHeader class but the image just was too big and it didn't contain itself inside the header. It only made the header larger. I only want to contain a gif inside the header like the one in the example. I also tried checking the website's code but to no avail.
An issue has risen where I am able to see my svg links everywhere aside from chrome. Here is what they are supposed to look like:
But in chrome it looks like this(don't mind the spider):
Here is the code that renders them:
<div className="medias">
<div id="contact" className="medias-bar">
<a className="a-tag" href="https://github.com/nathanhains"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github-square" class="svg-inline--fa fa-github-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4 .2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9 .2 36.5 .2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9 .4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7 .6 3.9 1.9 .3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2 .2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7 .9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2 .4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8 .9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1 .9-1.1 2.8-.9 4.3 .6 1.3 1.3 1.8 3.3 .9 4.1zm-9.1-9.1c-.9 .6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9 .9-2.4 .4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5 .9-.9 2.4-.4 3.5 .6 1.1 1.3 1.3 2.8 .4 3.5zm-6.7-7.4c-.4 .9-1.7 1.1-2.8 .4-1.3-.6-1.9-1.7-1.5-2.6 .4-.6 1.5-.9 2.8-.4 1.3 .7 1.9 1.8 1.5 2.6z"></path></svg></a>
<a className="a-tag" href="https://www.linkedin.com/in/nathanhains/"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin" class="svg-inline--fa fa-linkedin fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg></a>
<a className="a-tag" href="https://dev.to/nathanhains"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="dev" class="svg-inline--fa fa-dev fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M120.1 208.3c-3.88-2.9-7.77-4.35-11.65-4.35H91.03v104.5h17.45c3.88 0 7.77-1.45 11.65-4.35 3.88-2.9 5.82-7.25 5.82-13.06v-69.65c-.01-5.8-1.96-10.16-5.83-13.06zM404.1 32H43.9C19.7 32 .06 51.59 0 75.8v360.4C.06 460.4 19.7 480 43.9 480h360.2c24.21 0 43.84-19.59 43.9-43.8V75.8c-.06-24.21-19.7-43.8-43.9-43.8zM154.2 291.2c0 18.81-11.61 47.31-48.36 47.25h-46.4V172.1h47.38c35.44 0 47.36 28.46 47.37 47.28l.01 70.93zm100.7-88.66H201.6v38.42h32.57v29.57H201.6v38.41h53.29v29.57h-62.18c-11.16 .29-20.44-8.53-20.72-19.69V193.7c-.27-11.15 8.56-20.41 19.71-20.69h63.19l-.01 29.52zm103.6 115.3c-13.2 30.75-36.85 24.63-47.44 0l-38.53-144.8h32.57l29.71 113.7 29.57-113.7h32.58l-38.46 144.8z"></path></svg></a>
<a className="a-tag" href="https://twitter.com/nathanhains"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter-square" class="svg-inline--fa fa-twitter-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8 .2 5.7 .2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3 .6 10.4 .8 15.8 .8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.45 65.45 0 0 1 -29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"></path></svg></a>
</div>
</div>
The CSS:
.medias {
width: 100%;
position: absolute;
top: 1788px;
height: 90%;
left: 0px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.medias-bar {
z-index: 5;
width: 50%;
height: 10%;
top: 70%;
left: 50%;
margin-left: -118px;
position: absolute;
display: flex;
flex-direction: row;
}
.medias-bar svg{
padding: 14px;
cursor: pointer;
margin: 12.7px;
transition: 600ms;
}
.medias-bar svg:hover {
padding: 18px;
filter: drop-shadow(0px 0px 5px rgba(235, 209, 164, 1));
}
.fa-github-square{
filter: drop-shadow(-5px 7px 3px rgba(0, 0, 0, 0.4));
}
.fa-twitter-square{
filter: drop-shadow(5px 7px 3px rgba(0, 0, 0, 0.4));
}
.fa-linkedin{
filter: drop-shadow(0px 7px 3px rgba(0, 0, 0, 0.4));
}
.fa-dev{
filter: drop-shadow(0px 7px 3px rgba(0, 0, 0, 0.4));
}
.a-tag {
color: black;
margin: 0;
padding: 0;
}
This was working in the past with no errors as well. I am not sure why this change has happened. Any possible ideas?
Your positioning and sizing are both over and under specified and it's pushing the content far off the page. Here's a plain HTML/CSS version that at least renders the content visible - so you could start from here and tweak. (Added a 1px border to show where the wrapper divs are rendering)
.medias {
border: 1px red solid;
width: 100%;
position: absolute;
top: 0px;
height: 90%;
left: 0px;
overflow: hidden;
}
.medias-bar {
border: 1px blue solid;
position: absolute;
z-index: 5;
width: 50%;
height: 10%;
top: 70%;
left: 50%;
margin-left: -118px;
display: flex;
flex-direction: row;
}
.medias-bar svg{
width: 20%;
padding: 14px;
cursor: pointer;
margin: 12.7px;
transition: 600ms;
}
.medias-bar svg:hover {
padding: 18px;
filter: drop-shadow(0px 0px 5px rgba(235, 209, 164, 1));
}
.fa-github-square{
filter: drop-shadow(-5px 7px 3px rgba(0, 0, 0, 0.4));
}
.fa-twitter-square{
filter: drop-shadow(5px 7px 3px rgba(0, 0, 0, 0.4));
}
.fa-linkedin{
filter: drop-shadow(0px 7px 3px rgba(0, 0, 0, 0.4));
}
.fa-dev{
filter: drop-shadow(0px 7px 3px rgba(0, 0, 0, 0.4));
}
.a-tag {
color: black;
margin: 0;
padding: 0;
}
<div class="medias">
<div id="contact" class="medias-bar">
<a class="a-tag" href="https://github.com/nathanhains"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github-square" class="svg-inline--fa fa-github-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4 .2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9 .2 36.5 .2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9 .4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7 .6 3.9 1.9 .3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2 .2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7 .9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2 .4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8 .9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1 .9-1.1 2.8-.9 4.3 .6 1.3 1.3 1.8 3.3 .9 4.1zm-9.1-9.1c-.9 .6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9 .9-2.4 .4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5 .9-.9 2.4-.4 3.5 .6 1.1 1.3 1.3 2.8 .4 3.5zm-6.7-7.4c-.4 .9-1.7 1.1-2.8 .4-1.3-.6-1.9-1.7-1.5-2.6 .4-.6 1.5-.9 2.8-.4 1.3 .7 1.9 1.8 1.5 2.6z"></path></svg></a>
<a class="a-tag" href="https://www.linkedin.com/in/nathanhains/"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin" class="svg-inline--fa fa-linkedin fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg></a>
<a class="a-tag" href="https://dev.to/nathanhains"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="dev" class="svg-inline--fa fa-dev fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M120.1 208.3c-3.88-2.9-7.77-4.35-11.65-4.35H91.03v104.5h17.45c3.88 0 7.77-1.45 11.65-4.35 3.88-2.9 5.82-7.25 5.82-13.06v-69.65c-.01-5.8-1.96-10.16-5.83-13.06zM404.1 32H43.9C19.7 32 .06 51.59 0 75.8v360.4C.06 460.4 19.7 480 43.9 480h360.2c24.21 0 43.84-19.59 43.9-43.8V75.8c-.06-24.21-19.7-43.8-43.9-43.8zM154.2 291.2c0 18.81-11.61 47.31-48.36 47.25h-46.4V172.1h47.38c35.44 0 47.36 28.46 47.37 47.28l.01 70.93zm100.7-88.66H201.6v38.42h32.57v29.57H201.6v38.41h53.29v29.57h-62.18c-11.16 .29-20.44-8.53-20.72-19.69V193.7c-.27-11.15 8.56-20.41 19.71-20.69h63.19l-.01 29.52zm103.6 115.3c-13.2 30.75-36.85 24.63-47.44 0l-38.53-144.8h32.57l29.71 113.7 29.57-113.7h32.58l-38.46 144.8z"></path></svg></a>
<a class="a-tag" href="https://twitter.com/nathanhains"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter-square" class="svg-inline--fa fa-twitter-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8 .2 5.7 .2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3 .6 10.4 .8 15.8 .8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.45 65.45 0 0 1 -29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"></path></svg></a>
</div>
</div>
Try to set fill="black" instead of fill="currentColor"
<div className="medias">
<div id="contact" className="medias-bar">
<a className="a-tag" href="https://github.com/nathanhains"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github-square" class="svg-inline--fa fa-github-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="black" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4 .2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9 .2 36.5 .2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9 .4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7 .6 3.9 1.9 .3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2 .2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7 .9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2 .4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8 .9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1 .9-1.1 2.8-.9 4.3 .6 1.3 1.3 1.8 3.3 .9 4.1zm-9.1-9.1c-.9 .6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9 .9-2.4 .4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5 .9-.9 2.4-.4 3.5 .6 1.1 1.3 1.3 2.8 .4 3.5zm-6.7-7.4c-.4 .9-1.7 1.1-2.8 .4-1.3-.6-1.9-1.7-1.5-2.6 .4-.6 1.5-.9 2.8-.4 1.3 .7 1.9 1.8 1.5 2.6z"></path></svg></a>
<a className="a-tag" href="https://www.linkedin.com/in/nathanhains/"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin" class="svg-inline--fa fa-linkedin fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="black" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg></a>
<a className="a-tag" href="https://dev.to/nathanhains"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="dev" class="svg-inline--fa fa-dev fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="black" d="M120.1 208.3c-3.88-2.9-7.77-4.35-11.65-4.35H91.03v104.5h17.45c3.88 0 7.77-1.45 11.65-4.35 3.88-2.9 5.82-7.25 5.82-13.06v-69.65c-.01-5.8-1.96-10.16-5.83-13.06zM404.1 32H43.9C19.7 32 .06 51.59 0 75.8v360.4C.06 460.4 19.7 480 43.9 480h360.2c24.21 0 43.84-19.59 43.9-43.8V75.8c-.06-24.21-19.7-43.8-43.9-43.8zM154.2 291.2c0 18.81-11.61 47.31-48.36 47.25h-46.4V172.1h47.38c35.44 0 47.36 28.46 47.37 47.28l.01 70.93zm100.7-88.66H201.6v38.42h32.57v29.57H201.6v38.41h53.29v29.57h-62.18c-11.16 .29-20.44-8.53-20.72-19.69V193.7c-.27-11.15 8.56-20.41 19.71-20.69h63.19l-.01 29.52zm103.6 115.3c-13.2 30.75-36.85 24.63-47.44 0l-38.53-144.8h32.57l29.71 113.7 29.57-113.7h32.58l-38.46 144.8z"></path></svg></a>
<a className="a-tag" href="https://twitter.com/nathanhains"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter-square" class="svg-inline--fa fa-twitter-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="black" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8 .2 5.7 .2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3 .6 10.4 .8 15.8 .8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.45 65.45 0 0 1 -29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"></path></svg></a>
</div>
</div>
I am working on a coloring application with a .PNG background (a photo of a building) and .SVG elements over the background. These .SVG paths are then being colored with the help of a JavaScript code. I started with setting the opacity of the .SVG layers to i.e. 0.65
In this case the .PNG background is visible behind the colored .SVG but the colors seem 'washed out' because the lowered opacity. Is there a way to maintain the intensity of the colors, i.e. to overlay the colored .SVG path on the .PNG background?
Here is the HTML part :
<div class="building_area_eave_1" id="building_area">
<svg version="1.0" id="full_x5F_wall_x5F_w_x5F_eave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 664" enable-background="new 0 0 1000 664" xml:space="preserve" style="margin-top:9px; opacity:0.65;">
<polygon id="main_wall_1" fill="#f7f7f7" points="200.833,135.184 32.167,302.846 32.75,478 67.25,480 66.992,321.747 158,314.5 159,488 257.25,496.5 256.5,303.25 392.022,291.75 392.25,508 461,513 461,256 "/>
</div>
with the CSS :
#building_area {
background-repeat: no-repeat;
background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;
background-size:contain;
background-position:center;
position: relative;
}
.building_area_eave_1 {
background: url("../images/1_part_eave_background.png") no-repeat;
}
hi do you expecting like this..???
#building_area {
background-repeat: no-repeat;
background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;
background-size:contain;
background-position:center;
position: relative;
}
.building_area_eave_1 {
background: url("http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg") no-repeat;
}
svg#full_x5F_wall_x5F_w_x5F_eave ~ #main_wall_1 {
opacity: 0.65;
}
<div class="building_area_eave_1" id="building_area">
<svg version="1.0" id="full_x5F_wall_x5F_w_x5F_eave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 664" enable-background="new 0 0 1000 664" xml:space="preserve" style="margin-top:9px;">
<polygon id="main_wall_1" fill="#f7f7f7" points="200.833,135.184 32.167,302.846 32.75,478 67.25,480 66.992,321.747 158,314.5 159,488 257.25,496.5 256.5,303.25 392.022,291.75 392.25,508 461,513 461,256 "/>
</div>
and here is the demo code..!!
Demo code
You can use blend modes in your svg:
<filter id="f1" x="0" y="0" width="1" height="1">
<feImage xlink:href="#p1" result="p1"/>
<feImage xlink:href="#p2" result="p2"/>
<feBlend mode="multiply" in="p1" in2="p2" />
</filter>
Here is a sample:
<svg width="500px" height="500px" viewBox="0 0 1000 1000">
<defs>
<path id="orange" d="M200,50 a35 35 0 0 1 100 0 l0 70 a40 40 0 0 1 -100 0 z" fill="rgb(252,170,30)"></path>
<path id="yellow" transform="rotate(45 250 185)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(242,229,0)">
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="45 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<path id="green" transform="rotate(90 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(181,213,74)" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="90 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<path id="greenblue" transform="rotate(135 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(104,193,159)" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="135 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<path id="blue" transform="rotate(180 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(112,178,226)" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="180 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<path id="violet" transform="rotate(225 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(166,141,197)" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="225 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<path id="pink" transform="rotate(270 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(213,135,172)" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="270 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<path id="red" transform="rotate(315 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(246,116,93)" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="315 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<filter id="blendit">
<feImage xlink:href="#orange" x="0" y="0" result="1"/>
<feImage xlink:href="#yellow" x="0" y="0" result="2"/>
<feImage xlink:href="#green" x="0" y="0" result="3"/>
<feImage xlink:href="#greenblue" x="0" y="0" result="4"/>
<feImage xlink:href="#blue" x="0" y="0" result="5"/>
<feImage xlink:href="#violet" x="0" y="0" result="6"/>
<feImage xlink:href="#pink" x="0" y="0" result="7"/>
<feImage xlink:href="#red" x="0" y="0" result="8"/>
<feBlend mode="multiply" in="1" in2="2" result="12"/>
<feBlend mode="multiply" in="12" in2="3" result="123"/>
<feBlend mode="multiply" in="123" in2="4" result="1234"/>
<feBlend mode="multiply" in="1234" in2="5" result="12345"/>
<feBlend mode="multiply" in="12345" in2="6" result="123456"/>
<feBlend mode="multiply" in="123456" in2="7"result="1234567"/>
<feBlend mode="multiply" in="1234567" in2="8" result="FINAL"/>
<feColorMatrix type="hueRotate" values="0">
<animate attributeName="values" attributeType="XML" values="0; 0; 0 ; 0 ; 0 ; 0 ;180;360;360" dur="12s" repeatCount="indefinite"/>
</feColorMatrix>
</filter>
</defs>
<rect x="0" y="0" width="500" height="500" filter="url(#blendit)"/>
</svg>
Full details here: https://css-tricks.com/basics-css-blend-modes/
OK, thanks to the link provided by #ramtin-gh I managed to solve this issue.
Adding a mix-blend-mode property to the SVG layers resulted the colors to display multiply to the background image.
HTML :
<div class="building_area_eave_1" id="building_area">
<svg class="svg_overlay" version="1.0" id="full_x5F_wall_x5F_w_x5F_eave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 664" enable-background="new 0 0 1000 664" xml:space="preserve">
<polygon id="main_wall_1" fill="#f7f7f7" points="200.833,135.184 32.167,302.846 32.75,478 67.25,480 66.992,321.747 158,314.5 159,488 257.25,496.5 256.5,303.25 392.022,291.75 392.25,508 461,513 461,256 "/>
</div>
with the CSS style :
#building_area {
background-repeat: no-repeat;
background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;
background-size:contain;
background-position:center;
position: relative;
}
.building_area_eave_1 {
background: url("../images/1_part_eave_background.png") no-repeat;
}
.svg_overlay {
margin-top:9px;
mix-blend-mode: multiply;
}
I'm not posting all the SVG layers here to keep the post simple. Thanks for your replies. Hope this can help someone with similar issue.
Core issue:
I'm trying to grab an SVG-Inline-Object with JavaScript and send it to the Server where the output represents the given SVG-Object.
All works fine in Chrome & FF but IE (>= 9) cuts the given string of the SVG-Object anywhere, so the string sent to the server is not complete that ends up in an error.
My current process:
html
<html>
<head></head>
<body>
<div>
<svg>(expect a correctly generated svg-object here - works fine)</svg>
<a href='#export'>export</a>
<!-- click on this link triggers the javascript-function !-->
</div>
</body>
</html>
javascript (triggered by click on the "export"-Link)
var $svg = $(this).parent().find("svg"); // works fine
var s = new XMLSerializer();
var svgContent = s.serializeToString($svg[0]);
$.post("/Results/saveSVG/", // saveSVG => store SVG-Data in Session
{ "svg" : svgContent }).done(function(data) {
window.open("/Results/getSVG/svg.php");
});
/Results/saveSVG/ (a PHP-File)
$_SESSION["svg"] = $_POST["svg"]; // similar to something like this (works fine)
svg.php (works like a charm in Chrome / FF
header("Content-type: image/svg+xml");
echo $_SESSION["svg"];
exit;
What happens in Chrome / FF?
svgContent-variable:
<svg>...</svg>
svgContent-variable received by the server (/Results/saveSVG/)
output on /Results/getSVG/svg.php is a perfect SVG-File
What happens in IE?
svgContent-variable is cropped somewhere:
<svg>..
invalid svgContent-variable received by the server (/Results/saveSVG/)
output on /Results/getSVG/svg.php does not render
Debug-Information in IE
svgContent-variable: (Javascript)
<svg xmlns="http://www.w3.org/2000/svg" width="263" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:NS1="" NS1:xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><defs><clipPath id="DevExpress_28"><rect fill="none" stroke="none" stroke-width="0" x="0" y="0" width="263" height="300" rx="0" ry="0" /></clipPath><pattern id="DevExpressPattern_46" patternUnits="userSpaceOnUse" width="6" height="6"><path opacity="0.8" fill="none" stroke="#1498e7" stroke-width="1" d="M 0 0 L 1 1" /><path opacity="0.8" fill="none" stroke="#1498e7" stroke-width="1" d="M 5 5 L 6 6" /><path fill="none" stroke="#1498e7" stroke-width="2" d="M 0 6 L 6 0" /></pattern><pattern id="DevExpressPattern_47" patternUnits="userSpaceOnUse" width="6" height="6"><path opacity="0.8" fill="none" stroke="#7bc940" stroke-width="1" d="M 0 0 L 1 1" /><path opacity="0.8" fill="none" stroke="#7bc940" stroke-width="1" d="M 5 5 L 6 6" /><path fill="none" stroke="#7bc940" stroke-width="2" d="M 0 6 L 6 0" /></pattern><pattern id="DevExpressPattern_48" patternUnits="userSpaceOnUse" width="6" height="6"><path opacity="0.8" fill="none" stroke="#c7399a" stroke-width="1" d="M 0 0 L 1 1" /><path opacity="0.8" fill="none" stroke="#c7399a" stroke-width="1" d="M 5 5 L 6 6" /><path fill="none" stroke="#c7399a" stroke-width="2" d="M 0 6 L 6 0" /></pattern></defs><g class="series"><g class="series"><path fill="#0084d3" stroke="#ffffff" stroke-dasharray="none" stroke-linejoin="round" stroke-width="2" d="M 85.9999 229.674 A 92 92 0 0 0 224 150 L 132 150 A 0 0 0 0 1 132 150 Z" r="0" line-width="2" /><path fill="#67b52c" stroke="#ffffff" stroke-dasharray="none" stroke-linejoin="round" stroke-width="2" d="M 86 70.3256 A 92 92 0 0 0 85.9999 229.674 L 132 150 A 0 0 0 0 1 132 150 Z" r="0" line-width="2" /><path fill="#b32586" stroke="#ffffff" stroke-dasharray="none" stroke-linejoin="round" stroke-width="2" d="M 224 150 A 92 92 0 0 0 86 70.3256 L 132 150 A 0 0 0 0 1 132 150 Z" r="0" line-width="2" /></g></g><g class="labels"><g class="labels"><g><path fill="none" stroke="#0084d3" stroke-width="1" d="M 179 231 L 188 247" /><g transform="rotate(0)" x="187.9998589266569" y="246.99492667245295"><rect fill="#0084d3" stroke="none" stroke-dasharray="none" stroke-width="0" x="185" y="243" width="43" height="25" rx="0" ry="0" /><text style="font-family: 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 12px; font-weight: 400; fill: #ffffff;" text-anchor="start" x="192.9999" y="260"><tspan x="192.9999" dy="0">33 %</tspan></text></g></g><g><path fill="none" stroke="#67b52c" stroke-width="1" d="M 39 150.5 L 20 150.5" /><g transform="translate(6) rotate(0)" x="20.000000000042646" y="149.99990226156188"><rect fill="#67b52c" stroke="none" stroke-dasharray="none" stroke-width="0" x="-6" y="137" width="25" height="25" rx="0" ry="0" /><text style="font-family: 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 12px; font-weight: 400; fill: #ffffff;" text-anchor="end" x="10" y="154"><tspan x="10" dy="0">...</tspan></text></g></g><g><path fill="none" stroke="#b32586" stroke-width="1" d="M 179 69 L 188 53" /><g transform="rotate(0)" x="188.00002821465443" y="53.00517106588667"><rect fill="#b32586" stroke="none" stroke-dasharray="none" stroke-width="0" x="185" y="32" width="43" height="25" rx="0" ry="0" /><text style="font-family: 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 12px; font-weight: 400; fill: #ffffff;" text-anchor="start" x="193" y="49"><tspan x="193" dy="0">33 %</tspan></text></g></g></g></g><g class="dxTooltip"><path visibility="hidden" opacity="0.1" fill="#000000" stroke="none" d="M 0 0" /><path visibility="hidden" fill="black" stroke="none" d="M 0 0 Z" /><text visibility="hidden" style="font-family: 'SegoeUI-Light', 'Segoe UI Light', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 26px; font-weight: 200; cursor: default; fill: #ffffff; fill-opacity: 0.75;" text-anchor="middle" x="0" y="0"><tspan x="0" dy="0">0</tspan></text></g><g class="tracker"><g class="seriesTracker" /><g class="markerTracker"><path opacity="0.0001" fill="grey" stroke="none" stroke-linejoin="round" d="M 85.9999 229.674 A 92 92 0 0 0 224 150 L 132 150 A 0 0 0 0 1 132 150 Z" /><path opacity="0.0001" fill="grey" stroke="none" stroke-linejoin="round" d="M 86 70.3256 A 92 92 0 0 0 85.9999 229.674 L 132 150 A 0 0 0 0 1 132 150 Z" /><path opacity="0.0001" fill="grey" stroke="none" stroke-linejoin="round" d="M 224 150 A 92 92 0 0 0 86 70.3256 L 132 150 A 0 0 0 0 1 132 150 Z" /></g></g></svg>
Same variable fully stored in the Session
Output with SVG is cut:
<svg xmlns="http://www.w3.org/2000/svg" width="263" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:NS1="" NS1:xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><defs><clipPath id="DevExpress_28"><rect fill="none" stroke="none" stroke-width="0" x="0" y="0" width="263" height="300" rx="0" ry="0" /></clipPath><pattern id="DevExpressPattern_46" patternUnits="userSpaceOnUse" width="6" height="6"><path opacity="0.8" fill="none" stroke="#1498e7" stroke-width="1" d="M 0 0 L 1 1" /><path opacity="0.8" fill="none" stroke="#1498e7" stroke-width="1" d="M 5 5 L 6 6" /><path fill="none" stroke="#1498e7" stroke-width="2" d="M 0 6 L 6 0" /></pattern><pattern id="DevExpressPattern_47" patternUnits="userSpaceOnUse" width="6" height="6"><path opacity="0.8" fill="none" stroke="#7bc940" stroke-width="1" d="M 0 0 L 1 1" /><path opacity="0.8" fill="none" stroke="#7bc940" stroke-width="1" d="M 5 5 L 6 6" /><path fill="none" stroke="#7bc940" stroke-width="2" d="M 0 6 L 6 0" /></pattern><pattern id="DevExpressPattern_48" patternUnits="userSpaceOnUse" width="6" height="6"><path opacity="0.8" fill="none" stroke="#c7399a" stroke-width="1" d="M 0 0 L 1 1" /><path opacity="0.8" fill="none" stroke="#c7399a" stroke-width="1" d="M 5 5 L 6 6" /><path fill="none" stroke="#c7399a" stroke-width="2" d="M 0 6 L 6 0" /></pattern></defs><g class="series"><g class="series"><path fill="#0084d3" stroke="#ffffff" stroke-dasharray="none" stroke-linejoin="round" stroke-width="2" d="M 85.9999 229.674 A 92 92 0 0 0 224 150 L 132 150 A 0 0 0 0 1 132 150 Z" r="0" line-width="2" /><path fill="#67b52c" stroke="#ffffff" stroke-dasharray="none" stroke-linejoin="round" stroke-width="2" d="M 86 70.3256 A 92 92 0 0 0 85.9999 229.674 L 132 150 A 0 0 0 0 1 132 150 Z" r="0" line-width="2" /><path fill="#b32586" stroke="#ffffff" stroke-dasharray="none" stroke-linejoin="round" stroke-width="2" d="M 224 150 A 92 92 0 0 0 86 70.3256 L 132 150 A 0 0 0 0 1 132 150 Z" r="0" line-width="2" /></g></g><g class="labels"><g class="labels"><g><path fill="none" stroke="#0084d3" stroke-width="1" d="M 179 231 L 188 247" /><g transform="rotate(0)" x="187.9998589266569" y="246.99492667245295"><rect fill="#0084d3" stroke="none" stroke-dasharray="none" stroke-width="0" x="185" y="243" width="43" height="25" rx="0" ry="0" /><text style="font-family: 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 12px; font-weight: 400; fill: #ffffff;" text-anchor="start" x="192.9999" y="260"><tspan x="192.9999" dy="0">33 %</tspan></text></g></g><g><path fill="none" stroke="#67b52c" stroke-width="1" d="M 39 150.5 L 20 150.5" /><g transform="translate(6) rotate(0)" x="20.000000000042646" y="149.99990226156188"><rect fill="#67b52c" stroke="none" stroke-dasharray="none" stroke-width="0" x="-6" y="137" width="25" height="25" rx="0" ry="0" /><text style="font-family: 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 12px; font-weight: 400; fill: #ffffff;" text-anchor="end" x="10" y="154"><tspan x="10" dy="0">...</tspan></text></g></g><g><path fill="none" stroke="#b32586" stroke-width="1" d="M 179 69 L 188 53" /><g transform="rotate(0)" x="188.00002821465443" y="53.00517106588667"><rect fill="#b32586" stroke="none" stroke-dasharray="none" stroke-width="0" x="185" y="32" width="43" height="25" rx="0" ry="0" /><text style="font-family: 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 12px; font-weight: 400; fill: #ffffff;" text-anchor="start" x="193" y="49"><tspan x="193" dy="0">33 %</tspan></text></g></g></g></g><g class="dxTooltip"><path visibility="hidden" opacity="0.1" fill="#000000" stroke="none" d="M 0 0" /><path visibility="hidden" fill="black" stroke="none" d="M 0 0 Z" /><text visibility="hidden" style="font-family: 'SegoeUI-Light', 'Segoe UI Light', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana;
Conclusion
the above concept works fine in chrome and ff but fails on all tested IE-Versions (9 / 10 / 11)
I've also tried to add the values into a hidden textarea and send the form to svg.php (Same effect / Chrome and FF - okay / IE fails).
Is there anything I have to adjust in the $.post-Request or is there any other concept to export an inline-SVG-Object?
the solution (thanks to timclutton - answer)
The problem caused due to a double-defined xmlns-attributes in the opening tag. Because I have no ifluence in the method where the svg-object was created, a simple str_replace did the job:
svg.php
<?
session_start();
header("Content-type: image/svg+xml");
echo str_replace("xmlns=\"http://www.w3.org/2000/svg\" xmlns:NS1=\"\" NS1:xmlns:xlink=\"http://www.w3.org/1999/xlink\"","",$_SESSION["svg"]);
?>
I've built the following from the code you posted (with minor alterations) and this works for me in IE11 and FF30 on Win8.1 x64. Perhaps try putting these two files in a folder (with jQuery, or change the src to a CDN) and see if it works for you.
File svg.php:
<?php
session_start();
if ($_POST) {
$_SESSION['svg'] = $_POST['svg'];
exit;
}
?>
<html>
<head>
<title>blah</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function svg(e) {
var $svg = $(e).parent().find("svg"); // works fine
var s = new XMLSerializer();
var svgContent = s.serializeToString($svg[0]);
$.post("svg.php", // saveSVG => store SVG-Data in Session
{ "svg" : svgContent }).done(function(data) {
window.open("svg2.php");
});
}
</script>
</head>
<body>
<div>
<svg>
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
export
<!-- click on this link triggers the javascript-function !-->
</div>
</body>
</html>
File svg2.php:
<?php
session_start();
header("Content-type: image/svg+xml");
echo $_SESSION["svg"];
exit;
?>
Update for actual SVG content
The problem seems to be with the opening tag. Changing it from...
<svg xmlns="http://www.w3.org/2000/svg" width="263" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:NS1="" NS1:xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
...to...
<svg xmlns="http://www.w3.org/2000/svg" width="263" height="300" version="1.1">
...makes it work with the code I posted above.
Update 2
Running your SVG code through the W3C Validator shows the errors. Using the modified opening tag I posted above validates successfully.
In conclusion, the problem is down to invalid XML.
Maybe it's not relevant, but have you tried this?
header("Content-type: image/svg+xml");
echo '<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' .$_SESSION["svg"];
(extracted from https://stackoverflow.com/a/1623265/3625883)