What is it about the setup of Code 2 that won't let you make the play button larger within the box?

What is it about the setup of Code 2 that won’t let you make the play button larger within the box? What’s different about the code?

Code 1.)

<svg style="background-color:black;" width="100" height="106" viewBox="0 0 95 100">
 <path fill="currentColor" style="fill:#0059dd; " 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>

Code 2.)

<svg width="100" height="106" style="background-color:black;" viewBox="0 0 36 36">
 <path fill="currentColor" style="fill:#0059dd; " d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>
</svg>

I believe this question has already been addressed indirectly in this thread:

Either search or experiment.

There’s absolutely 0 way to do this. Not with code 2.

This is the best I could do.

<svg width="100" height="106" style="background-color:black;" viewBox="15 9 11 17">
 <path fill="currentColor" style="fill:#0059dd; " d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>
</svg>
<svg 
 width="100" 
 height="124" 
 style="background-color:#000;" 
 viewBox="12 11.5 13 13">
<path 
  fill="currentColor" 
  style="fill:#0059dd;" 
  d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z">
</path>
</svg>
1 Like

Would the viewBox on here be set up correctly?

<svg width="100%" height="100%" style="background-color:red;transform: scale(.5);" viewBox="13 8.9 11 18">
    <path fill="currentColor" style="stroke: #0059dd; stroke-width:1px;color:black;" d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>
  </svg>

Looking at the link below and understanding what it is telling you, do you believe that what you have pasted above meets its requirements?

I don’t know.

Here is a more detailed description and explanation of the viewbox attribute and svg coord system:-

https://www.sarasoueidan.com/blog/svg-coordinate-systems/

2 Likes

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