How to use 100% with Stroke?

HTML & CSS
1

How can I use 100% with Stroke without it getting cut off at the top and bottom?

Are there any tricks I can use?

Code:

<svg width="100%" height="100%" style="background-color:red;transform: scale(.5);" viewBox="0 0 85 100">
    <path fill="currentColor" style="stroke: #0059dd; stroke-width:3px;color:black;" 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>
2

Try this:

The only changes are within the viewBox attribute.

1 Like
3

Thanks! I didn’t know I was able to do that.

I just did this one.:

<svg width="100%" height="100%" style="background-color:red;transform: scale(.5);" viewBox="-3 -3 65 106">
    <path fill="currentColor" style="stroke: #0059dd; stroke-width:3px;color:black;" 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>
1 Like
4

What’s the reason why the red box won’t expand more?

<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('playButton2');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
playButton2.innerHTML = '&lt;svg width=\'100\' height=\'100\' style=\'color:#e77d19; \' viewBox=\'0 0 16 14\'&gt;&lt;path fill=\'currentColor\' fill-rule=\'evenodd\' d=\'M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z\'&gt;&lt;/svg&gt;';
player.play();
playButton2.style.border='none';
playButton2.style.boxShadow='inset 0 0 0 3px #e77d19';
playButton2.style.backgroundImage = 'url(\'')';
} else {
playButton2.innerHTML = '&lt;svg width=\'100\' height=\'100\' style=\'color:#e77d19; \' viewBox=\'0 0 16 14\'&gt;&lt;path fill=\'currentColor\' fill-rule=\'evenodd\' d=\'M12.945.38l-.652.7623zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z\'&gt;&lt;/svg&gt;';
player.pause();
playButton2.style.border='none';
playButton2.style.boxShadow='inset 0 0 0 3px #e77d19';
playButton2.style.backgroundImage = 'url(\'')';
}">

 <svg width="100%" height="100%" style="background-color:red;transform: scale(.5);" viewBox="10.5 8.5 13 19">
    <path fill="currentColor" style="stroke: #0059dd; stroke-width:1px;color:black;" d="M8,21 L12,21 L17,26 L17,10 L12,15 L8,15 L8,21 Z M19,14 L19,22 C20.48,21.32 21.5,19.77 21.5,18 C21.5,16.26 20.48,14.74 19,14 ZM19,11.29 C21.89,12.15 24,14.83 24,18 C24,21.17 21.89,23.85 19,24.71 L19,26.77 C23.01,25.86 26,22.28 26,18 C26,13.72 23.01,10.14 19,9.23 L19,11.29 Z"></path>
  </svg>

</button>



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

Change transform:scale(.5) to a larger number, such as from .5 to 1.

6

Having scale set to 1 would give you the element’s native scale. So effectively it’s the same as removing the scale altogether.

1 Like
7

I used “such as” to illustrate an example of where the change could be made and what value could be substituted :slight_smile:

8

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