Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.