fix rendering of the svg
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
431f661740
commit
86826313a8
|
@ -258,23 +258,26 @@
|
|||
</div>
|
||||
<div
|
||||
ref="ogwrapper"
|
||||
class="og-wrapper lg:pl-10"
|
||||
class="og-wrapper pl-10"
|
||||
>
|
||||
<svg data-marpit-svg :viewBox="[0, 0, width, height].join(' ')">
|
||||
<foreignObject
|
||||
:width="width"
|
||||
:height="height"
|
||||
<div class="og-wrapper-content">
|
||||
<svg
|
||||
:viewBox="[0, 0, width, height].join(' ')"
|
||||
:style="ogSvgStyle()"
|
||||
:width="ogMaxWidth"
|
||||
:height="ogMaxHeight"
|
||||
>
|
||||
<div class="og-wrapper-content">
|
||||
<foreignObject
|
||||
:style="ogSvgFoStyle()"
|
||||
>
|
||||
<div
|
||||
ref="og"
|
||||
class="og"
|
||||
:style="ogStyle()"
|
||||
>
|
||||
<div
|
||||
ref="render"
|
||||
class="og-image"
|
||||
ref="ogimage"
|
||||
:style="ogImageStyle()"
|
||||
>
|
||||
<div
|
||||
|
@ -337,9 +340,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-center mt-3">
|
||||
<DownloadButton
|
||||
class="rounded-l-md"
|
||||
|
@ -518,23 +521,31 @@ export default {
|
|||
methods: {
|
||||
ogSvgStyle() {
|
||||
return {
|
||||
maxHeight: `${this.ogMaxHeight}px`,
|
||||
maxWidth: `${this.ogMaxWidth}px !important`,
|
||||
aspectRatio: `${this.width}/${this.height}`,
|
||||
maxHeight: `${this.ogMaxHeight}px !important`,
|
||||
maxWidth: '100%',
|
||||
}
|
||||
},
|
||||
ogSvgFoStyle() {
|
||||
return {
|
||||
aspectRatio: `${this.width}/${this.height}`,
|
||||
maxHeight: `${this.ogMaxHeight}px !important`,
|
||||
width: `${this.width}px`,
|
||||
height: `${this.height}px`,
|
||||
}
|
||||
},
|
||||
ogStyle() {
|
||||
return {
|
||||
color: this.textColor,
|
||||
fontFamily: this.font,
|
||||
maxHeight: `${this.ogMaxHeight}px`,
|
||||
maxWidth: `${this.ogMaxWidth}px !important`,
|
||||
aspectRatio: `${this.width}/${this.height}`,
|
||||
maxHeight: `${this.ogMaxHeight}px !important`,
|
||||
width: `${this.width}px`,
|
||||
height: `${this.height}px`,
|
||||
}
|
||||
},
|
||||
ogImageStyle() {
|
||||
let value = {
|
||||
aspectRatio: `${this.width}/${this.height}`,
|
||||
aspectRatio: `${this.width}/${this.height}`
|
||||
}
|
||||
|
||||
if (this.background) {
|
||||
|
@ -599,9 +610,7 @@ export default {
|
|||
|
||||
return {
|
||||
background,
|
||||
aspectRatio: `${this.width}/${this.height}`,
|
||||
maxHeight: `${this.ogMaxHeight}px`,
|
||||
maxWidth: `${this.ogMaxWidth}px`,
|
||||
aspectRatio: `${this.width}/${this.height}`
|
||||
}
|
||||
},
|
||||
ogContentStyle() {
|
||||
|
@ -622,7 +631,7 @@ export default {
|
|||
return this.download(toJpeg, 'image.jpg')
|
||||
},
|
||||
download(callback, filename) {
|
||||
const element = this.$refs.ogimage
|
||||
const element = this.$refs.render
|
||||
|
||||
callback(element, {
|
||||
canvasWidth: this.width,
|
||||
|
@ -671,11 +680,21 @@ export default {
|
|||
width: calc(100vw - 540px);
|
||||
}
|
||||
|
||||
.og-svg {
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.og-svg > foreignObject {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.og-wrapper-content {
|
||||
background-color: #c1c1c1;
|
||||
background-image: linear-gradient(45deg, #646464 25%, transparent 25%, transparent 75%, #646464 75%), linear-gradient(45deg, #646464 25%, transparent 25%, transparent 75%, #646464 75%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 10px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.og-heading {
|
||||
|
|
Loading…
Reference in a new issue