svg: simple

®Geovin Du Dream Park™ / 2023-05-10 / 原文

 

<!--Scalable Vector Graphic-->
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"  
     width="350px" 
     height="80px" 
     viewBox="0 0 350px 80px">
<!-- Draw polyline  edit geovindu 2022-11-23-->	
<polyline points="180 20,210 20,250 20" stroke-width="3" fill="none" stroke="#cccccc"></polyline>
<circle cx="50" cy="20" r="10" fill="blue"></circle> 
<line x1="50" y1="20" x2="85" y2="20" stroke="blue" />
<circle cx="90" cy="20" r="10" fill="blue"></circle>
<line x1="100" y1="20" x2="120" y2="20" stroke="blue" />
<circle cx="130" cy="20" r="10" fill="blue"></circle>	
<line x1="140" y1="20" x2="160" y2="20" stroke="blue" />		
<image href="du1.svg" x="155" y="5" class="img-geovindu"/>	
<circle cx="210" cy="20" r="10" fill="gray"></circle>
<circle cx="250" cy="20" r="10" fill="gray"></circle>
<text x="120" y="55" font-size="13" style="fill: #000000">(和蚌慢慢融合)</text>		
</svg>

  

 

<svg xmlns="http://www.w3.org/2000/svg"
     xml:lang="en-GB" width="100%" height="47.5em">
    <title>The Mouse's Tale - Lewis Carroll</title>
    <desc>From Alice in Wonderland</desc>
    <style>
        svg {
            font-family: serif;
            font-size: medium;
        }
        text {
            font-size: 150%;           
        }
        .em {
            font-style: italic;        
        }
        .smaller {
            font-size: 85%;            
        }
    </style>
    <text>                             
      <tspan dy="1em" x="50%" dx="-2.68em">Fury said to</tspan> 
      <tspan dy="1em" x="50%" dx="-1.65em">a mouse, That</tspan>
      <tspan dy="1em" x="50%" dx="-1.03em">he met in the</tspan>
      <tspan dy="1em" x="50%" dx="-0.62em">house, “Let</tspan>  
      <tspan dy="1em" x="50%" dx="-1.03em">us both go</tspan>
      <tspan dy="1em" x="50%" dx="-1.44em">to law:
                <tspan class="em">I</tspan></tspan>             
      <tspan dy="1em" x="50%" dx="-2.06em">will prose-</tspan>
      <tspan dy="1em" x="50%" dx="-2.06em">cute
                <tspan class="em">you.</tspan>—</tspan>
      <tspan class="smaller">                                   
        <tspan dy="1em" x="50%" dx="-2.19em">Come, I’ll</tspan>
        <tspan dy="1em" x="50%" dx="-1.7em">take no de-</tspan>
        <tspan dy="1em" x="50%" dx="-0.73em">nial; We </tspan>
        <tspan dy="1em" x="50%" dx="-0.24em">must have</tspan>
        <tspan dy="1em" x="50%" dx="-0em">the trial:</tspan>
        <tspan dy="1em" x="50%" dx="-0.49em">For really</tspan>
        <tspan class="smaller">                                 
          <tspan dy="1em" x="50%" dx="-1.14em">this morn-</tspan>
          <tspan dy="1em" x="50%" dx="-1.43em">ing I’ve</tspan>
          <tspan dy="1em" x="50%" dx="-2em">nothing</tspan>
          <tspan dy="1em" x="50%" dx="-2.57em">to do.”</tspan>
          <tspan dy="1em" x="50%" dx="-3.14em">Said the</tspan>
          <tspan dy="1em" x="50%" dx="-3.71em">mouse to</tspan>
          <tspan dy="1em" x="50%" dx="-4em">the cur,</tspan>
          <tspan class="smaller">
            <tspan dy="1em" x="50%" dx="-5.04em">“Such a</tspan>
            <tspan dy="1em" x="50%" dx="-4.7em">trial, dear</tspan>
            <tspan dy="1em" x="50%" dx="-4.03em">Sir, With</tspan>
            <tspan dy="1em" x="50%" dx="-3.36em">no jury</tspan>
            <tspan dy="1em" x="50%" dx="-2.69em">or judge</tspan>
            <tspan dy="1em" x="50%" dx="-2.02em">would</tspan>
            <tspan dy="1em" x="50%" dx="-1.34em">be wast-</tspan>
            <tspan dy="1em" x="50%" dx="-1.01em">ing our</tspan>
            <tspan class="smaller">
              <tspan dy="1em" x="50%" dx="-0.4em">breath.”</tspan>
              <tspan dy="1em" x="50%" dx="-0em">“I’ll be</tspan>
              <tspan dy="1em" x="50%" dx="0.79em">judge,</tspan>
              <tspan dy="1em" x="50%" dx="0.79em">I’ll be</tspan>
              <tspan dy="1em" x="50%" dx="0.4em">jury,”</tspan>
              <tspan dy="1em" x="50%" dx="-0em">said</tspan>
              <tspan dy="1em" x="50%" dx="-0.79em">cun-</tspan>
              <tspan dy="1em" x="50%" dx="-1.19em">ning</tspan>
              <tspan class="smaller">
                <tspan dy="1em" x="50%" dx="-1.86em">old</tspan>
                <tspan dy="1em" x="50%" dx="-2.79em">Fury:</tspan>
                <tspan dy="1em" x="50%" dx="-3.26em">“I’ll</tspan>
                <tspan dy="1em" x="50%" dx="-3.72em">try</tspan>
                <tspan dy="1em" x="50%" dx="-4.19em">the</tspan>
                <tspan dy="1em" x="50%" dx="-4.19em">whole</tspan>
                <tspan dy="1em" x="50%" dx="-3.72em">cause</tspan>
                <tspan class="smaller">
                  <tspan dy="1em" x="50%" dx="-3.29em">and</tspan>
                  <tspan dy="1em" x="50%" dx="-2.19em"
                                    >condemn</tspan>            
                  <tspan dy="-0.7em">you to</tspan>
                  <tspan dy="-0.7em">death!”</tspan>
                </tspan>
              </tspan>
            </tspan>
          </tspan>
        </tspan>                                 
      </tspan>
    </text>
</svg>

  

 

from: https://www.oreilly.com/library/view/svg-text-layout/9781491933817/ch04.html#mouses-tale-example

https://oreillymedia.github.io/SVG_Text_Layout/

https://github.com/oreillymedia/SVG_Text_Layout