How come one play button has jagged edges on it, and how do I remove them, or put the code in differently? One has ridges on it, the other one doesn’t.
How would I remove the jagged edges from the first code?
vs.
<div style="visibility: hidden; position: absolute">
<img style="visibility: hidden; position: absolute" src="https://i.imgur.com/DrNBAbe.png" width="266" height="250" alt="" />
<img style="visibility: hidden; position: absolute" src="https://i.imgur.com/IvGhkoU.png" width="16" height="20" alt="" />
<img style="visibility: hidden; position: absolute" src="https://i.imgur.com/IvGhkoU.png" width="16" height="20" alt="" />
</div>
<div id="playButton4" style="width: 266px; height: 250px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 86px,#0059dd 86px, #0059dd 89px, transparent 89px, transparent 177px, #0059dd 177px, #0059dd 180px, transparent 180px ), url('https://i.imgur.com/DrNBAbe.png');box-Shadow:inset 0 0 0 3px #0059dd;background-repeat: no-repeat;" onclick="
var button = document.getElementById('playButton4');
var player = document.getElementById('player4');
document.querySelector('#playButton4 .play').style.display='none';
document.querySelector('#playButton4 .pause').style.display='none';
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton4 .pause').style.display='inline-block';
player.play();
} else {
document.querySelector('#playButton4 .play').style.display='inline-block';
player.pause();
}">
<svg class="play" width="266" height="250" viewbox="0 0 266 150">
<circle cx="138" cy="74" r="24.5" stroke-width="6" fill="orange" />
<line x1="6" y1="75" x2="32" y2="75" stroke="#f00" stroke-width="6" />
<line x1="39" y1="75" x2="111" y2="75" stroke="#f00" stroke-width="6" />
<line x1="86" y1="44" x2="192" y2="105" stroke="#f00" stroke-width="6" />
<line x1="137" y1="12" x2="137" y2="136" stroke="#f00" stroke-width="6" />
<line x1="86" y1="105" x2="192" y2="44" stroke="#f00" stroke-width="6" />
<line x1="152" y1="51" x2="188" y2="-12" stroke="#f00" stroke-width="6" />
<line x1="191" y1="-17" x2="205" y2="-40" stroke="#f00" stroke-width="6" />
<line x1="151" y1="98" x2="188" y2="161" stroke="#f00" stroke-width="6" />
<line x1="191" y1="166" x2="205" y2="188" stroke="#f00" stroke-width="6" />
<circle cx="138" cy="74" r="24.5" stroke="red" stroke-width="6" fill="black" />
<image x="133" y="64" width="16" height="20" xlink:href="https://i.imgur.com/9JZdJz0.png" />
</svg>
<svg class="pause" style="display: none;" width="266" height="250" viewbox="0 0 266 150">
<circle cx="138" cy="74" r="24.5" stroke-width="6" fill="orange" />
<line x1="6" y1="75" x2="32" y2="75" stroke="#f00" stroke-width="6" />
<line x1="39" y1="75" x2="111" y2="75" stroke="#f00" stroke-width="6" />
<line x1="86" y1="44" x2="192" y2="105" stroke="#f00" stroke-width="6" />
<line x1="137" y1="12" x2="137" y2="136" stroke="#f00" stroke-width="6" />
<line x1="86" y1="105" x2="192" y2="44" stroke="#f00" stroke-width="6" />
<line x1="152" y1="51" x2="188" y2="-12" stroke="#f00" stroke-width="6" />
<line x1="191" y1="-17" x2="205" y2="-40" stroke="#f00" stroke-width="6" />
<line x1="151" y1="98" x2="188" y2="161" stroke="#f00" stroke-width="6" />
<line x1="191" y1="166" x2="205" y2="188" stroke="#f00" stroke-width="6" />
<circle cx="138" cy="74" r="24.5" stroke="red" stroke-width="6" fill="black" />
<image x="130" y="64" width="16" height="20" xlink:href="https://i.imgur.com/IvGhkoU.png" />
</svg>
</div>
<audio id="player4" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
Vs.
This one:
<div style="visibility: hidden; position: absolute">
<img style="visibility: hidden; position: absolute" src="https://i.imgur.com/DrNBAbe.png" width="266" height="250" alt="" />
<img style="visibility: hidden; position: absolute" src="https://i.imgur.com/9JZdJz0.png" width="16" height="20" alt="" />
<img style="visibility: hidden; position: absolute" src="https://i.imgur.com/IvGhkoU.png" width="44" height="20" alt="" />
</div>
<div id="playButton4" style="width: 266px; height: 250px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 86px,#0059dd 86px, #0059dd 89px, transparent 89px, transparent 177px, #0059dd 177px, #0059dd 180px, transparent 180px ), url('https://i.imgur.com/DrNBAbe.png');box-Shadow:inset 0 0 0 3px #0059dd;background-repeat: no-repeat;" onclick="
var button = document.getElementById('playButton4');
var player = document.getElementById('player4');
document.querySelector('#playButton4 .play').style.display='none';
document.querySelector('#playButton4 .pause').style.display='none';
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton4 .pause').style.display='inline-block';
player.play();
} else {
document.querySelector('#playButton4 .play').style.display='inline-block';
player.pause();
}">
<div class="play" style="display:block;position:absolute;width: 44px; height:43px;margin:97px 110px;background-color:rgba(0, 0, 0, 0);background-image: url('https://i.imgur.com/9JZdJz0.png');background-size: 16px 20px;background-repeat: no-repeat;background-position: 58% 50%;border-radius: 500px;border: 6px solid pink;"> </div>
<div class="pause" style="display: none;width: 44px; height:43px;margin:97px 110px;background-color:rgba(0, 0, 0, 0);background-image: url('https://i.imgur.com/IvGhkoU.png');background-repeat: no-repeat;background-size: 16px 20px;background-position: 50%;border-radius: 500px; border: 6px solid pink;"> </div>
</div>
<audio id="player4" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
I think I solved it by just using the div inside the svg
<div style="width: 16px; height:20px;margin:-136px 132px;background-image: url('https://i.imgur.com/9JZdJz0.png');background-size: 16px 20px;background-repeat: no-repeat;background-position: 58% 50%;"> </div>
<div style="width: 16px; height:20px;margin:-136px 130px;;background-image: url('https://i.imgur.com/IvGhkoU.png');background-repeat: no-repeat;background-size: 16px 20px;background-position: 50%;"> </div>
Instead of this:
<image x="130" y="64" width="16" height="20" xlink:href="https://i.imgur.com/IvGhkoU.png" />
I was just told:
“Divs are HTML only, and are not valid in SVGs.”
now what?
How do I remove the ridges from the image then?
Someone is telling me it might be a bug in firefox.
It happens in Internet explorer 11 also
It’s a known bug that’s been reported 2 years ago, that still hasn’t been fixed.
Does anyone on here have a solution that will let me use an image inside an SVG without the jagged edges?
I was taught how to do it this way, but how come it’s not working?
How come it works here, but not on the below code?
<div style="visibility: hidden; position: absolute">
<img style="visibility: hidden; position: absolute" src="https://i.imgur.com/DrNBAbe.png" width="266" height="250" alt="" />
<img style="visibility: hidden; position: absolute" src="https://i.imgur.com/9JZdJz0.png" width="16" height="20" alt="" />
<img style="visibility: hidden; position: absolute" src="https://i.imgur.com/IvGhkoU.png" width="16" height="20" alt="" />
</div>
<style>
.button div{ width:44px;height: 44px;
margin: -148px 116px;
background-color:yellow;
background-size:14px 18px;
background-repeat: no-repeat;
border-radius: 50%;
position:relative;
}
</style>
<div id="playButton4" style="width: 266px; height: 250px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 86px,#0059dd 86px, #0059dd 89px, transparent 89px, transparent 177px, #0059dd 177px, #0059dd 180px, transparent 180px ), url('https://i.imgur.com/DrNBAbe.png');box-Shadow:inset 0 0 0 3px #0059dd;background-repeat: no-repeat;" onclick="
var button = document.getElementById('playButton4');
var player = document.getElementById('player4');
document.querySelector('#playButton4 .play').style.display='none';
document.querySelector('#playButton4 .pause').style.display='none';
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton4 .pause').style.display='inline-block';
player.play();
} else {
document.querySelector('#playButton4 .play').style.display='inline-block';
player.pause();
}">
<svg width="266" height="250" viewbox="0 0 266 150">
<circle cx="138" cy="74" r="24.5" stroke-width="6" fill="orange" />
<line x1="6" y1="75" x2="32" y2="75" stroke="#f00" stroke-width="6" />
<line x1="39" y1="75" x2="111" y2="75" stroke="#f00" stroke-width="6" />
<line x1="86" y1="44" x2="192" y2="105" stroke="#f00" stroke-width="6" />
<line x1="137" y1="12" x2="137" y2="136" stroke="#f00" stroke-width="6" />
<line x1="86" y1="105" x2="192" y2="44" stroke="#f00" stroke-width="6" />
<line x1="152" y1="51" x2="188" y2="-12" stroke="#f00" stroke-width="6" />
<line x1="191" y1="-17" x2="205" y2="-40" stroke="#f00" stroke-width="6" />
<line x1="151" y1="98" x2="188" y2="161" stroke="#f00" stroke-width="6" />
<line x1="191" y1="166" x2="205" y2="188" stroke="#f00" stroke-width="6" />
<circle cx="138" cy="74" r="24.5" stroke="red" stroke-width="6" fill="black" />
<div class="button" >
<div class="play" style="background-image: url('https://i.imgur.com/9JZdJz0.png'); background-position: 58% 50%;background-size: 16px 20px;"> </div>
<div class="pause" style="background-image: url('https://i.imgur.com/IvGhkoU.png');background-position: 50%;background-size: 16px 20px;display: none;"> </div>
</div>
<audio id="player4" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
How come this code looks different on both of these, and how do I get them both to look the same?
It’s uneven on here:
It’s even on here:
I think I should be using relative here, and not absolute.
<style>
.button div{ width:44px;height: 44px;
margin: -148px 116px;
background-color:yellow;
background-size:14px 18px;
background-repeat: no-repeat;
border-radius: 50%;
position:relative;
}
</style>
If exactly the same code looks different on W3Schools and JSFiddle, then I would say that must be because of differences in the rendering engines they’re using.
What actually matters is how the code renders when viewed directly in a browser.
2 Likes
asasass
October 30, 2017, 10:18am
10
How come these 2 are lined up evenly?
Not all code is going to render differently between the two. Just as most code will display the same on Firefox, Chromium and Edge, but there might on an odd occasion be a glitch in one of them, so code will mostly render the same on W3Schools, JSFiddle, CodePen etc., with just occasional differences.
These things are just tools to help you view and edit code. Always check how the code renders in browsers; don’t rely solely on these tools.
asasass
October 30, 2017, 10:28am
12
But if there’s a glitch in the code, I want to find it and fix it.
I’m not referring to a glitch in your code, but to a glitch in the rendering engines.
@PaulOB explained to you here that your code wouldn’t work on IE and Edge because there is a problem with those browsers and the use of calc, so you needed to change your code to accommodate that. The problem was not with your original code, but in the way those particular browsers were rendering it.
The same thing applies here. It is not necessarily your code which is incorrect, but the way one of those sites is rendering it. The glitch is in their software.
Does your code display correctly when it is viewed directly in the browsers, rather than run on JSFiddle or W3Schools?
asasass
October 30, 2017, 10:40am
14
How am I supposed to know?
asasass
October 30, 2017, 10:46am
16
If it’s viewed correctly in the browser.
Create an HTML page with your code in it and open it with a browser - any browser. Then open it with a different browser. Do they both look the same? Do they look the way you want them to look?
asasass
October 30, 2017, 10:59am
18
I just did that and got this:
So, then that means something needs to be fixed.
And I have no idea what.
You need to move the yellow button. Its position is being set by the margins, so adjust those by a few pixels at a time until it sits where you want it to.
<style>
.button div{ width:44px;height: 44px;
margin: -148px 116px;
background-color:yellow;
background-size:14px 18px;
background-repeat: no-repeat;
border-radius: 50%;
position:relative;
}
</style>
asasass
October 30, 2017, 11:07am
20
How is that even possible when it shows here that it’s even?
And on blogger it’s even.
But when I make an html page, it’s not even.
It has to be something else.
