Styling an H1 with multiple colors

HTML & CSS
77

May I suggest going back to SVG basics because they are remarkably powerful especially for simple text which has an abundance of styling options:

Jenkov SVG Tutorial is a good starting point.

Also please note from the simple demo that SVGs are designed to SCALE. Applying width and height to the SVG tag defeats the whole XML object (excuse the pun) and instead should be replaced with viewbox()
.

Online Demo

https://this-is-a-test-to-see-if-it-works.tk/sp-a/upstateleafpeeper/

Screendump

ulp=svg-003-Screenshot from 2020-06-14 13-11-12
ulp=svg-003-Screenshot from 2020-06-14 13-11-121402×925 98.7 KB

Source Code:

<?php declare(strict_types=1);
error_reporting(-1);
ini_set('display_errors', 'true');

$title    = 'John_Betong Scaling SVG ';
$tutorial = 'http://tutorials.jenkov.com/svg/text-element.html';

echo "
<!DOCTYPE HTML><html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,height=device-height,initial-scale=1'>
<title> $title </title>

<style>
  svg {
    background-color: #ffffcc; 
    margin: 0.42em; 
  }
  .clb {clear: both;}
  .fll {float: left;}  .flr {float: right;}
</style>

</head>
<body>
<h1> $title </h1>
<h2> <a href='$tutorial'> $tutorial </a> </h2>
<hr>
";

for($i2=1088; $i2>=88; $i2 -= 180) :

  echo $svg = "  
    <svg viewBox = '0 0 $i2 32'>
    <text x='0' y='1em' fill='blue'>\$i2=$i2</text>
    <text
      style='
        font-family: Arial;
        font-size  : 134;
        stroke     : #ff0000;
        fill       : #00ff00;
        '
        x='90' y='1em' fill='red'>My </text>
    <text x='112px' y='1em'  fill='green'>Company</text>
  </svg>  
  ";  

endfor;

echo '</body></html>';

Edit:

Amended script and removed spurious spaces in <text>...</text> because they matter :slight_smile:

1 Like