I am using SVGtoPDF npm library to get svg element on pdf but for following svg object it is not working as <image> tag is creating problem.
ERROR Message:: SVGElemImage: failed to open image "http://174.138.12.68:4000/uploads/products/1597070187552-Ash%20Back.jpg" in PDFKit
My SVG data:::
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="400" viewBox="0 0 400 400" xml:space="preserve">
<desc>Created with Fabric.js 2.7.0</desc>
<defs>
</defs>
<g transform="matrix(0.31 0 0 0.31 200 200)" >
<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" xlink:href="http://174.138.12.68:4000/uploads/products/1597070187552-Ash%20Back.jpg" x="-512" y="-640" width="1024" height="1280"></image>
</g>
<g transform="matrix(1 0 0 1 206.5 263.5)" >
<rect style="stroke: rgb(0,0,255); stroke-width: 3; stroke-dasharray: 7 7; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(230,230,230); fill-opacity: 0.8; fill-rule: nonzero; opacity: 0.2;" x="-100" y="-100" rx="0" ry="0" width="200" height="200" />
</g>
<g clip-path="url(#CLIPPATH_4)" >
<g transform="matrix(0.9 0 0 0.9 205 244.88)" >
<clipPath id="CLIPPATH_4" >
<rect transform="matrix(1 0 0 1 206.5 263.5)" x="-100" y="-100" rx="0" ry="0" width="200" height="200" />
</clipPath>
<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" xlink:href="http://174.138.12.68:4000/transparent_images/1598349009675-1589379674035GoogleFiveStarCust.Rating.pdf-1.svg" x="-111" y="-92" width="222" height="184"></image>
</g>
</g>
</svg>
I think remote image import is still not implemented. What you can do is download the image and replace the path in the svg and export. This is working for me since my original svg referenced local image I didn't had this issue.
Related
I have an HTML that contains inline SVG data. I want to convert that HTML file into the PDF file. I have tried 2 packages TCPDF and DOMPDF to convert HTML into PDF. These packages are not displaying SVG content in the converted PDF files.Here is my HTML content
<div style="position: relative;"><img src="https://cdn.shopify.com/s/files/1/1659/7869/products/TEAM-TAKEDOWN-STREAMLINE-WHITE.jpg" style="width: 600px; height: auto;"><div style="position: absolute; top: 216px; left: 194px;width: 225px;height: 330px;overflow: hidden;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="225" height="330" viewBox="0 0 225 330" xml:space="preserve">
<defs>
</defs>
<g transform="matrix(0.5 0 0 0.5 112.5 165)" >
<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" xlink:href="https://cdn.shopify.com/s/assets/no-image-100-c91dd4bdb56513f2cbf4fc15436ca35e9d4ecd014546c8d421b1aece861dfecf_small.gif" x="-50" y="-50" width="100" height="100"></image>
</g>
<g transform="matrix(0.5 0 0 0.5 112.5 165)" >
<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" xlink:href="https://accessibilityplus.ca/storage/images/1597153275_Asset%201%20copy%202.png" x="-215.5" y="-244.5" width="431" height="489"></image>
</g>
<g transform="matrix(0.5 0 0 0.5 112.5 165)" >
<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" xlink:href="https://accessibilityplus.ca/storage/images/1595491407_1592358037_design.png" x="-200" y="-200" width="400" height="400"></image>
</g>
</svg></div></div>
Here is my current output: http://prntscr.com/u5jcc3.
Here is the expected output: http://prntscr.com/u5jd4s.
I'm trying to modify a svg to make the image it holds take the full width and height of the svg. How can I do that?
I'm trying to modify width and height to 100%, x, y to "0" and set this svg property preserveAspectRatio="xMidYMid meet".
This is the initial svg :
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1512" height="1063" viewBox="0 0 1512 1063" xml:space="preserve">
<desc>Created with Fabric.js 1.6.7</desc>
<defs></defs>
<g transform="translate(776.8 529.9) scale(1.01 0.95)">
<image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" width="1461" height="1564" preserveAspectRatio="none"></image>
</g>
<g id="1554312687241" transform="translate(781 762.29)">
<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
</text>
</g>
<g id="1554312687289" transform="translate(779 847.3)">
<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
</text>
</g>
<g id="1554312687296" transform="translate(776 811.17)">
<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
</text>
</g>
</svg>
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="0 0 1512 1063" xml:space="preserve"><desc>Created with Fabric.js 1.6.7</desc><defs></defs><g transform="translate(776.8 529.9) scale(1.01 0.95)"><image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" width="1461" height="1564" preserveAspectRatio="none"></image></g> <g id="1554312687241" transform="translate(781 762.29)"> <text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"> <tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan> </text> </g> <g id="1554312687289" transform="translate(779 847.3)"> <text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"> <tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan> </text> </g> <g id="1554312687296" transform="translate(776 811.17)"> <text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"> <tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan> </text> </g></svg>
What I've been trying to do :
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="0 0 1512 1063" xml:space="preserve" preserveAspectRatio="xMidYMid meet"><g transform="translate(776.8 529.9) scale(1.01 0.95)"><image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="0" y="0" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" width="100%" height="100%" preserveAspectRatio="none"></image></g> <g id="1554312687241" transform="translate(781 762.29)"> <text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"> <tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan> </text> </g> <g id="1554312687289" transform="translate(779 847.3)"> <text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"> <tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan> </text> </g> <g id="1554312687296" transform="translate(776 811.17)"> <text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"> <tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan> </text> </g></svg>
I expect this result :
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<svg width="300px" height="300px" viewBox="0 0 579 375" preserveAspectRatio="xMidYMid slice">
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9674/photo-1501366062246-723b4d3e4eb6.jpg" x="0" y="0" width="100%" height="100%"></image>
</svg>
But if i just change image url of expect svg, result is different of what i expect i don't understand why.
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<svg width="300px" height="300px" viewBox="0 0 579 375" preserveAspectRatio="xMidYMid slice">
<image xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="0" y="0" width="100%" height="100%"></image>
</svg>
The final objective is to download the svg in png. The code to transform to png is finished however because of this svg problem, the final image is not good.
You need to adjust the viewBox attribute. The one you currently have is way too big. Your important content occupies a small portion in the middle of that area.
Your current viewBox is:
viewBox="0 0 1512 1063"
A better viewBox that matches the non-transparent part of your background image is:
viewBox="472 16 616 960"
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="472 16 616 960" xml:space="preserve">
<desc>Created with Fabric.js 1.6.7</desc>
<defs></defs>
<g transform="translate(776.8 529.9) scale(1.01 0.95)">
<image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
</g>
<g id="1554312687241" transform="translate(781 762.29)">
<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
</text>
</g>
<g id="1554312687289" transform="translate(779 847.3)">
<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
</text>
</g>
<g id="1554312687296" transform="translate(776 811.17)">
<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
</text>
</g>
</svg>
However in this example it still does not fit exactly. That is because your SVG dimensions (219 x 302) have a different aspect ratio to the image/viewBox (616x960).
You can fix that in various ways:
You could stretch the viewBox area, to fit the wider SVG dimensions, by adding preserveAspectRatio="none" to the SVG.
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="472 16 616 960" preserveAspectRatio="none">
<desc>Created with Fabric.js 1.6.7</desc>
<defs></defs>
<g transform="translate(776.8 529.9) scale(1.01 0.95)">
<image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
</g>
<g id="1554312687241" transform="translate(781 762.29)">
<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
</text>
</g>
<g id="1554312687289" transform="translate(779 847.3)">
<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
</text>
</g>
<g id="1554312687296" transform="translate(776 811.17)">
<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
</text>
</g>
</svg>
You could arrange for the viewBox area to be enlarged to fit the wider SVG dimensions (equivalent to HTML's background-size: cover), by adding preserveAspectRatio="xMidYMid slice" to the SVG.
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="472 16 616 960" preserveAspectRatio="xMidYMid slice">
<desc>Created with Fabric.js 1.6.7</desc>
<defs></defs>
<g transform="translate(776.8 529.9) scale(1.01 0.95)">
<image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
</g>
<g id="1554312687241" transform="translate(781 762.29)">
<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
</text>
</g>
<g id="1554312687289" transform="translate(779 847.3)">
<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
</text>
</g>
<g id="1554312687296" transform="translate(776 811.17)">
<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
</text>
</g>
</svg>
You could make the SVG narrower by reducing the width attribute. A more correct value would be:
302 * (616/960) ~= 194
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="194" height="302" viewBox="472 16 616 960">
<desc>Created with Fabric.js 1.6.7</desc>
<defs></defs>
<g transform="translate(776.8 529.9) scale(1.01 0.95)">
<image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
</g>
<g id="1554312687241" transform="translate(781 762.29)">
<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
</text>
</g>
<g id="1554312687289" transform="translate(779 847.3)">
<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
</text>
</g>
<g id="1554312687296" transform="translate(776 811.17)">
<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
</text>
</g>
</svg>
The problem you have is that the image has a wide transparent border. You either need to use a Photoshop like software to cut off that border or you can do it like this:
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<svg viewBox="-304 -506 608 1005" >
<g id="theg">
<image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-733" y="-750" width="1461" height="1564"></image>
</g>
<g id="theText" text-anchor="middle" fill="#ffffff">
<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" >Votre entreprise</text>
<text font-family="ABeeZee" y="30" font-size="20" >Votre adresse</text>
<text font-family="ABeeZee" font-size="18" y="60" >Votre telephone</text>
</g>
</svg>
I need to generate multiple parallel connections from an original one, as shown in code:
Code:
<svg width="800" height="800">
<!-- one filter -->
<g transform="translate(50,50)">
<text y="50">Original</text>
<path d="m 0,0L0,100 L100,100 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
</g>
<g transform="translate(250,50)">
<text y="50">Generated</text>
<path d="m 0,0L0,100 L100,100 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
<path d="m 10,0L10,90 L100,90 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
<path d="m 20,0L20,80 L100,80 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
</g>
<g transform="translate(50,250)">
<text y="50">Original</text>
<path d="m 0,0L10,90 L100,70 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
</g>
<g transform="translate(250,250)">
<text y="50">Generated</text>
<path d="m 0,0L10,90 L100,70 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
<path d="m 10,0L20,80 L100,60 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
</g>
</svg>
https://codepen.io/anon/pen/wyObNr
Is there any easy way to do it? Something like cloning and just making it fit along the original one would be perf
regards
Svg provides the means for reuse of partial drawings with the defs element. It may contain groups (g element) that contain an arbitrarily complex scene. These may be referenced thereafter with the use element which effectively produces a clone which can then be subjected to transformations (an arbitrary mix of rotations, scalings, translations).
What follows is a reformulation of your sample scene:
<svg
width="800" height="800"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
<g id="angle">
<path d="m 0,0L0,100 L100,100 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
</g>
<g id="multi">
<use xlink:href="#angle" />
<use xlink:href="#angle" transform="translate(10,-10)"/>
<use xlink:href="#angle" transform="translate(20,-20)"/>
</g>
</defs>
<!-- base case -->
<g transform="translate(50,50)">
<text x="50" y="50">Original</text>
<use xlink:href="#angle"/>
</g>
<g transform="translate(50,50) translate(200,0)">
<text x="50" y="50">Generated</text>
<use xlink:href="#multi" />
</g>
<!-- rotated -->
<g transform="translate(50,50) translate(0,200)">
<text x="50" y="50">Original</text>
<g transform="rotate(-20)">
<use xlink:href="#angle"/>
</g>
</g>
<g transform="translate(50,50) translate(200,200)">
<text x="75" y="25">Generated</text>
<g transform="rotate(-20)">
<use xlink:href="#multi"/>
</g>
</g>
</svg>
The gradient and marker definitions for my SVG appear to get overwritten when my SVG is inside my webpage. There are no other SVGs on the page.
But when I take the SVG out of the page, it looks just fine.
Here is the SVG in this example.
<svg xmlns="http://www.w3.org/2000/svg" height="500" width="800">
<style>
svg .node.species {
stroke: #FFB800;
stroke-width: 3px;
size: 300px;
}
svg .node.reaction {
stroke: #8089F7;
opacity: 0;
stroke-width: 1.5px;
}
svg .link {
stroke: black;
stroke-width: 3px;
}
svg .link.modifier {
stroke-dasharray: 5, 5;
}
svg .node-label {
font-size: 14px;
font-family: Georgia;
font-weight: bolder;
text-anchor: middle;
dominant-baseline: middle;
}
/* svg .node.selected {
stroke: #FF0000;
}
svg .link.selected {
stroke: #FF0000;
}*/
svg marker {
overflow: visible;
}
svg .null-symbol {
fill: none;
stroke: black;
stroke-width: 3px;
}
</style>
<defs>
<linearGradient id="gradient">
<stop offset="5%" stop-color="#FFDC9E"></stop>
<stop offset="95%" stop-color="#FFF"></stop>
</linearGradient>
<linearGradient id="markerGradient">
<stop offset="5%" stop-color="rgb(97, 116, 255)"></stop>
<stop offset="95%" stop-color="#FFF"></stop>
</linearGradient>
<linearGradient id="reactionGradient">
<stop offset="5%" stop-color="#B0C0FF"></stop>
<stop offset="95%" stop-color="#FFF"></stop>
</linearGradient>
<marker case-sensitive="refX,refY" id="production" viewBox="0 0 10 10" markerWidth="10" markerHeight="10" orient="auto" refx="-2" refy="0" refX="-2" refY="0">
<path fill="url(#markerGradient)" stroke="#0013FF" transform="rotate(-90)" d="M0,2.0808957251439084L2.4028114141347543,-2.0808957251439084 -2.4028114141347543,-2.0808957251439084Z"></path>
</marker>
<marker case-sensitive="refX,refY" id="degradation" viewBox="0 0 10 10" markerWidth="10" markerHeight="10" orient="auto" refx="-2" refy="0" refX="-2" refY="0">
<path fill="url(#markerGradient)" stroke="#0013FF" transform="rotate(-90)" d="M0,2.0808957251439084L2.4028114141347543,-2.0808957251439084 -2.4028114141347543,-2.0808957251439084Z"></path>
</marker>
<marker case-sensitive="refX,refY" id="modifier" viewBox="0 0 10 10" markerWidth="30" markerHeight="30" orient="auto" refx="-0.4" refy="0" refX="-0.4" refY="0">
<path stroke="black" stroke-width="0.3" fill="none" d="M0,0.5641895835477563A0.5641895835477563,0.5641895835477563 0 1,1 0,-0.5641895835477563A0.5641895835477563,0.5641895835477563 0 1,1 0,0.5641895835477563Z"></path>
</marker>
</defs>
<g transform="translate(, )scale(1)">
<g>
<line class="reaction production link" marker-end="url(#production)" x1="449.9996697164325" y1="218.45791860388687" x2="451.42692033038736" y2="246.7481154723436">
</line><line class="reaction production link" marker-end="url(#production)" x1="399.21583821133174" y1="309.0153067725509" x2="345.33989421522693" y2="338.2824980727582">
</line>
</g>
<g>
<line class="reaction reactant link" x1="446.9075572254284" y1="157.1677217354301" x2="449.9996697164325" y2="218.45791860388687">
</line><line class="reaction reactant link" x1="453.0917822074366" y1="279.7481154723436" x2="399.21583821133174" y2="309.0153067725509">
</line>
</g>
<g>
</g>
<g draggable="" transform="translate(446.9075572254284,157.1677217354301)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<rect class="species node" fill="url(#gradient)" x="-50" y="-15" width="100" height="30" ry="15">
<title>ID: S1, Name: S1</title>
</rect>
<text class="node-label">S1</text>
</g><g draggable="" transform="translate(453.0917822074366,279.7481154723436)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<rect class="species node" fill="url(#gradient)" x="-50" y="-15" width="100" height="30" ry="15">
<title>ID: S2, Name: S2</title>
</rect>
<text class="node-label">S2</text>
</g><g draggable="" transform="translate(345.33989421522693,338.2824980727582)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<rect class="species node" fill="url(#gradient)" x="-50" y="-15" width="100" height="30" ry="15">
<title>ID: S3, Name: S3</title>
</rect>
<text class="node-label">S3</text>
</g>
<g draggable="" transform="translate(473.4770117242872,216.74146493626216)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<circle class="node reaction" fill="url(#reactionGradient)" r="5">
<title>ID: reaction1, Name: reaction1</title>
</circle>
<text class="node-label"></text>
</g><g draggable="" transform="translate(409.9633485910613,329.9478703486097)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<circle class="node reaction" fill="url(#reactionGradient)" r="5">
<title>ID: reaction2, Name: reaction2</title>
</circle>
<text class="node-label"></text>
</g>
</g>
</svg>
EDIT 1
Here is the style of the linearGradient element
EDIT 2
Style of the defs element
EDIT 3
I found that when I remove the head tag, and then reapply it, the SVG is then correctly rendered. Weird.
Turns out I had <base href="/"> in head which was messing things up.
Just another question about SVG export in Fabric.js, I have tried http://fabricjs.com/kitchensink/ and I added two images to the canvas, then I applied shadow filter to them.
When I export it to image, looks nice, but when I export it to SVG, all images are not displayed. I used windows 7, Firefox 25, the filter is missing in SVG, it supposed to be located inside <defs>.
So my question is what I should know when I am doing with SVG from Fabric.js, if it didn't support somewhere, how could I add my own export method to its object, as I will use clip (not displayed in SVG too), shadow, and all other filters. Thanks.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="700" height="600" xml:space="preserve"><desc>Created with Fabric.js 1.4.0</desc>
<defs></defs>
<g transform="translate(237.81 209.86) rotate(36) scale(0.16 0.16)"><image xlink:href="http://fabricjs.com/assets/pug.jpg" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;filter: url(#SVGID_5);" transform="translate(-360 -540)" width="720" height="1080" preserveAspectRatio="none"></image></g>
<g transform="translate(479.6 187.6) rotate(3) scale(0.8 0.8)"><image xlink:href="http://fabricjs.com/assets/logo.png" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;filter: url(#SVGID_4);" transform="translate(-137.5 -47.5)" width="275" height="95" preserveAspectRatio="none"></image></g>
</svg>