[Resolved] How to layer a number over an SVG background

[Gabriel]

I have the following SVG html code. I want to have a grid with three of the SVG images and a “1”, “2”, and “3” over each one to signify three steps.

How do I do this?

<svg version=”1.1″ id=”Layer_1″ xmlns=”http://www.w3.org/2000/svg&#8221; xmlns:xlink=”http://www.w3.org/1999/xlink&#8221; x=”0px” y=”0px”
viewBox=”0 0 1009 1133″ style=”enable-background:new 0 0 1009 1133;” xml:space=”preserve”>
<style type=”text/css”>
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_1_);}
</style>
<linearGradient id=”SVGID_1_” gradientUnits=”userSpaceOnUse” x1=”729.2153″ y1=”747.2716″ x2=”123.1247″ y2=”262.401″ gradientTransform=”matrix(-1 0 0 -1 1009 1134)”>
<stop offset=”0″ style=”stop-color:#4D4D4F”/>
<stop offset=”1″ style=”stop-color:#000000″/>
</linearGradient>
<path class=”st0″ d=”M556.1,13.8l401.4,231.7c31.9,18.4,51.6,52.4,51.6,89.3v463.4c0,36.8-19.7,70.9-51.6,89.3l-401.4,231.7
c-31.9,18.4-71.2,18.4-103.1,0L51.6,887.5C19.7,869.1,0,835,0,798.2l0-463.4c0-36.8,19.7-70.9,51.6-89.3L452.9,13.8
C484.8-4.6,524.2-4.6,556.1,13.8z”/>
</svg>

[David]

Hi there,

have you considered including the number in the SVG image ? Far easier then trying to position HTML over the SVG.

[Gabriel]

Thanks – that’s what I thought and ended up doing!

[David]

Glad to hear that!

[Author]

Posts