Homec4science
Diffusion svg-test-app (master) Browse

svg-test-app/src/app/textfield-component/textfield.component.html
57a968934b70master

Last Change
Raw File

textfield.component.html
View Options

<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
[attr.viewBox]="viewBox" [attr.height]="svg_height" [attr.width]="svg_width"
class = 'textfield'>
<svg:g *ngIf="image">
<image [attr.xlink:href]="image.file_name" x="0" y="0" [attr.height]="image.height" [attr.width]="image.width"/>
</svg:g>
<svg:g *ngFor="let word of words">
<svg:g *ngIf="!image && markupAll">
<!-- Testing betting in whole markup component, so every word will be styled in the transcription-->
<foreignObject [attr.x]="word.left+2"
[attr.y]="word.top"
[attr.textLength]="word.width-4"
lengthAdjust="spacingAndGlyphs"
[ngClass]="{'text_fadeout': assignTextClass(word)}">
<xhtml:div><app-markup-text-component [textToStyle]="word.text"></app-markup-text-component></xhtml:div>
</foreignObject>
<svg:rect [interactedWord]="word"
[ngClass]="{
'textfield unhighlighted': true,
'textfield highlight': assignClass(0, word),
'textfield border': assignClass(1, word)
}"
[attr.x]="word.left" [attr.y]="word.top" [attr.height]="word.height" [attr.width]="word.width">
<title *ngIf="image">{{word.text}}</title>
</svg:rect>
</svg:g>
<svg:g *ngIf="!image && !markupAll">
<!-- test over -->
<svg:text [attr.x]="word.left+2"
[attr.y]="word.top+word.height/2+3"
[attr.textLength]="word.width-4"
lengthAdjust="spacingAndGlyphs"
[ngClass]="{'text_fadeout': assignTextClass(word)}">
{{word.text}}
</svg:text>
</svg:g>
<svg:rect [interactedWord]="word"
[ngClass]="{
'textfield unhighlighted': true,
'textfield highlight': assignClass(0, word),
'textfield border': assignClass(1, word)
}"
[attr.x]="word.left" [attr.y]="word.top" [attr.height]="word.height" [attr.width]="word.width">
<title *ngIf="image">{{word.text}}</title>
</svg:rect>
</svg:g>
</svg>
c4science · Help