When you add stroke to svg, it gets cut off, how do you fix that?

asasass · September 26, 2017, 4:53am

Code:

<svg width="200" height="200" viewBox="0 0 85 100"><path fill="currentColor" style="fill:none;stroke: #000000; stroke-width:5px;" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"><title>PLAY</title></path></svg>

John_Betong · September 26, 2017, 6:21am

Try this:

<svg
	style= "background-color:#cfc;"
	width="180" height="200"
	viewBox="-0 -3 86 106"
>
	<path
		fill="currentColor"
		style="fill:#ff9; stroke: #000000; stroke-width:5px;"
		d="M 81 44.6
			 c 5 3 5 7.8 0 10.8
			 L 9 98.7
			 c -5 3-9 .7-9-5
			 V 6.3
			 c 0-5.7 4-8 9-5
			 l 72 43.3
		 z">
		<title>PLAY</title>
	</path>
</svg>

Changes & Modifications:

narrowed the width
altered the viewBox coordinates
added a DEBUG background-color style

asasass · September 28, 2017, 7:16am

How would I adjust this one?

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: #000000; background-repeat: no-repeat; border: 3px solid #E77D19; border-radius:0px;font-family:Tahoma; font-weight: bold;font-size:30px; color:#E77D19;"
onclick="  
var button = document.getElementById('playButton');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
   playButton2.innerHTML = '<svg width=\'100\' height=\'100\' style=\'color:#E77D19;fill:black;stroke: orange; stroke-width:3px;color: transparent;\' viewBox=\'0 0 60 100\'><path fill=\'currentColor\' d=\'M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z\'></svg>';
    player.play();
playButton2.style.border='none' 
playButton2.style.boxShadow='inset 0 0 0 3px #E77D19'
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
  } else {
 playButton2.innerHTML = '<svg width=\'100\' height=\'100\' style=\'color:#E77D19;fill:black;stroke: orange; stroke-width:3px;color:#000000;\' viewBox=\'0 0 85 100\'><path fill=\'currentColor\' d=\'M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z\'></svg>';
    player.pause();
playButton2.style.border='none'
playButton2.style.boxShadow='inset 0 0 0 3px #E77D19'
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
  }">
  <svg width="100" height="100" style="fill:black;stroke: orange; stroke-width:3px;color:#000000;" viewBox="0 0 85 100">
    <path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
  </svg>
</button>

<audio id="player2" style="display:none;">
  <source src='' type='audio/mpeg' />
  </source>
</audio>

John_Betong · September 28, 2017, 9:27am

Use the same steps as shown in the previous post because svg dimensions remain fixed and the size varies according to the viewport without losing quality.

Trial and error and make sure a debug svg background-color is added to easily visualise the effects of the viewport changes.

asasass · September 28, 2017, 10:59am

<svg style="background-color:#cfc;" width="100" height="100" viewBox="0 -3 100 106"><path fill="currentColor" style="fill:black;stroke: orange; stroke-width:3px;" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path></svg>

asasass · October 2, 2017, 10:17pm

The pause button is 87px / 86px between the inside of the box,

If I wanted to flip it to 86px / 87px what would I change in the code?
Keeping the white background intact.

<svg style="background-color:white;" width="25" height="40" viewBox="16 0 25 100">
  <path fill="currentColor" style="fill:black; stroke: #E77D19; stroke-width:3px;" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>

asasass · October 2, 2017, 11:39pm

I believe the pause symbol is cut off here, just noticed it.

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: black; background-repeat: no-repeat; border: 3px solid #0059dd; border-radius:0px;font-family:Tahoma; font-weight: bold;font-size:30px; color:#E77D19;"
  onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
playButton2.innerHTML = '&lt;svg width=\'60\' height=\'100\' style=\'background-color:#000000;color:black; stroke: #0059dd; stroke-width:3px;\' viewBox=\'0 0 60 100\'&gt;&lt;path fill=\'currentColor\' d=\'M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z\'&gt;&lt;/svg&gt;';
player.play();
playButton2.style.border='none';
playButton2.style.boxShadow='inset 0 0 0 3px #0059dd';
playButton2.style.background = 'black';
} else {
playButton2.innerHTML = '&lt;svg width=\'85\' height=\'100\' style=\'background-color:#000000;color:black; stroke: #0059dd; stroke-width:3px;\' viewBox=\'0 -3 85 106\'&gt;&lt;path fill=\'currentColor\' d=\'M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z\'&gt;&lt;/svg&gt;';
player.pause();
playButton2.style.border='none';
playButton2.style.boxShadow='inset 0 0 0 3px #0059dd';
playButton2.style.background = 'black';
}">
<svg style="background-color:#000000;" width="60" height="100" viewBox="0 0 60 100">
  <path fill="currentColor" style="fill:black; stroke: #0059dd; stroke-width:3px;" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
</button>

<audio id="player2" style="display:none;">
  <source src='' type='audio/mpeg'></source>
</audio>

John_Betong · October 3, 2017, 12:04am

Try the viewbox. have no access to a desktop because upcountry, on holiday.

asasass · October 3, 2017, 2:27am

I readjusted this one, it looks better:

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: black; background-repeat: no-repeat; border: 3px solid #0059dd; border-radius:0px;font-family:Tahoma; font-weight: bold;font-size:30px; color:#E77D19;"
  onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
playButton2.innerHTML = '&lt;svg width=\'65\' height=\'109\' style=\'background-color:#000000;color:black; stroke: #0059dd; stroke-width:3px;\' viewBox=\'-1 0 62 100\'&gt;&lt;path fill=\'currentColor\' d=\'M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z\'&gt;&lt;/svg&gt;';
player.play();
playButton2.style.border='none';
playButton2.style.boxShadow='inset 0 0 0 3px #0059dd';
playButton2.style.background = 'black';
} else {
playButton2.innerHTML = '&lt;svg width=\'92\' height=\'109\' style=\'background-color:#000000;color:black; stroke: #0059dd; stroke-width:3px;\' viewBox=\'0 -3 85 106\'&gt;&lt;path fill=\'currentColor\' d=\'M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z\'&gt;&lt;/svg&gt;';
player.pause();
playButton2.style.border='none';
playButton2.style.boxShadow='inset 0 0 0 3px #0059dd';
playButton2.style.background = 'black';
}">
<svg style="background-color:#000000;" width="92" height="109" viewBox="0 -3 85 106">
  <path fill="currentColor" style="fill:black; stroke: #0059dd; stroke-width:3px;" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
</button>

<audio id="player2" style="display:none;">
  <source src='' type='audio/mpeg'></source>
</audio>

system · January 2, 2018, 9:27am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.