svg header alignment
create(){ | |
this.beforeCreate(); | |
var $text = this.figure.children().first(); | |
$text.addClass('hidden'); | |
var fontSize = Math.round(Number.parseInt($text.css('font-size'))); | |
var text = this.canvas.text(0, 0, $text.text()); | |
this._elements = [text]; | |
this.group.add(text); | |
this.group.attr({ | |
fontSize: fontSize, | |
fill: this._fill, | |
stroke: this._borderColor, | |
strokeWidth: this._borderWidth, | |
}); | |
var naturalHeight = text.getBBox().height; | |
if(!Number.isInteger(naturalHeight * 10) && !this.alreadyFixed){ | |
this.alreadyFixed = true; | |
alert('adding fix to header'); | |
naturalHeight = Math.round(naturalHeight * 0.8928); | |
this.figure.parent().addClass('fix'); | |
} | |
console.log(!Number.isInteger(naturalHeight * 10), text.getBBox().height); | |
this.setSVGWidthHeight(text.getBBox().width, naturalHeight); | |
this.setStartingPoint(text); | |
this.duplicate(text, 0); | |
$text.remove(); | |
this.afterCreate(); | |
} |
header.main-header{ | |
background: url('../img/homepage/homepage_background.png'); | |
background-size: cover; | |
background-position: center; | |
overflow: hidden; | |
.header-text{ | |
position: relative; | |
display: flex; | |
justify-content: center; | |
padding: 4.2vw 0; | |
a{ color: $white !important; } | |
&.fix{ | |
padding: 2vw 0 8vw; | |
figure.bot-left{ | |
svg{ | |
bottom: 0; | |
margin-bottom: 1vw; | |
} | |
} | |
figure.bot-right{ | |
svg{ | |
bottom: 0; | |
margin-bottom: 1vw; | |
} | |
} | |
} | |
$top: 2vw; | |
figure.top-left{ | |
svg{ | |
bottom: 0; | |
margin-top: $top; | |
} | |
} | |
figure.top-right{ | |
svg{ | |
bottom: 0; | |
margin-top: $top; | |
} | |
} | |
@include differentFontSize(15vw); | |
@media screen and (min-width: 1600px){ | |
@include differentFontSize($size8); | |
} | |
figure{ | |
svg{ | |
position: absolute; | |
} | |
// individual fixes and styles for each letter | |
&.char-3{ z-index: 9; } | |
&.char-Ea{ z-index: 10; } | |
&.char-L{ z-index: 8; } | |
&.char-Eb{ z-index: 7; } | |
&.char-V{ z-index: 6; } | |
&.char-Ec{ z-index: 5; } | |
&.char-N{ z-index: 4; } | |
} | |
} | |
} |
<header class="main-header"> | |
<div class="header-text"> | |
<!-- Before Javascript --> | |
<figure class="char-3 bot-left" | |
data-type="text" | |
data-border-color="green" | |
data-direction="bot-left"> | |
<h1>3</h1> | |
<svg class="root"></svg> | |
</figure> | |
... | |
<!-- After Javascript --> | |
<figure class="char-N bot-right" | |
data-type="text" | |
data-border-color="orange" | |
data-direction="bot-right"> | |
<h1>N</h1> | |
<svg class="root" width="732.734375" height="799"> | |
<desc>Created with Snap</desc> | |
<defs></defs> | |
<g id="content" fill="#ffffff" stroke="#dc654a" style="font-size: 199px; stroke-width: 2px;"> | |
<text x="0" y="749.25" z="0">L</text> | |
<text x="5" y="744" z="1" class="">L</text> | |
<text x="10" y="739" z="2" class="">L</text> | |
... | |
<text x="15" y="734" z="3" class="">L</text> | |
<text x="20" y="729" z="4" class="">L</text> | |
</g> | |
</svg> | |
</figure> | |
</div> | |
</header> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment