I am using SVG to clip an image to the shape of SVG.The screenshot I have attached is of chrome(first) and IE(second).In IE it looks very small in size.The issue is I find space between the SVG and path. I have tried out many combinations of viewBox but nothing worked out.I even scaled my SVG to 1*1 even then I am facing this issue.
<div>
<svg class="svg-graphic" width="100%" height="100%" viewBox="35 35 1000 1000" xmlns="http://www.w3.org/2000/svg" >
<g>
<clipPath id="arch-mask" >
<path class="st0" d="M905.33,324.23c0-4.36-3.42-7.48-7.89-7.89c-72.15-3.95-130.16-61.96-134.11-134.11
c-0.18-4.35-3.53-7.89-7.89-7.89H297.89c-4.36,0-7.48,3.42-7.89,7.89c-3.95,72.15-61.96,130.16-134.11,134.11
c-4.35,0.18-7.89,3.53-7.89,7.89v457.55c0,4.36,3.42,7.48,7.89,7.89c72.15,3.95,130.16,61.96,134.11,134.11
c0.18,4.35,3.53,7.89,7.89,7.89h457.55c4.36,0,7.48-3.42,7.89-7.89c3.95-72.15,61.96-130.16,134.11-134.11
</clipPath>
</g>
<image clip-path="url(#arch-mask)" height="100%" width="100%" xlink:href="https://picsum.photos/id/1003/500/500" />
</svg>
You have a few errors in your code like the path that isn't closing. I've changed the viewBox of the svg element so that you have no spaces between the clipping path and the borders of the svg element. Also I've changed the size and the position of the image to be the same as the bounding box of the clipping path. To get the bounding box you can use the getBBox() method.
In javaScript you'll find commented out the bounding box of the path inside the clipping path.
/*let bb = document.querySelector("#arch-mask path").getBBox();
console.log(bb)*/
svg{border:solid}
<svg class="svg-graphic" width="100%" height="100%" viewBox="148 174 757.33 757.33" xmlns="http://www.w3.org/2000/svg" >
<g>
<clipPath id="arch-mask" >
<path class="st0" d="M905.33,324.23c0-4.36-3.42-7.48-7.89-7.89c-72.15-3.95-130.16-61.96-134.11-134.11
c-0.18-4.35-3.53-7.89-7.89-7.89H297.89c-4.36,0-7.48,3.42-7.89,7.89c-3.95,72.15-61.96,130.16-134.11,134.11
c-4.35,0.18-7.89,3.53-7.89,7.89v457.55c0,4.36,3.42,7.48,7.89,7.89c72.15,3.95,130.16,61.96,134.11,134.11
c0.18,4.35,3.53,7.89,7.89,7.89h457.55c4.36,0,7.48-3.42,7.89-7.89c3.95-72.15,61.96-130.16,134.11-134.11"/>
</clipPath>
</g>
<image clip-path="url(#arch-mask)" x="148" y="174" width="757.33" height="757.33" xlink:href="https://picsum.photos/id/1003/500/500" />
</svg>
I have some SVG text that works fine on Firefox but in Chrome and Safari does not appear.
I have tried:
Adding padding to the svg container in case the text was being
cut-off,
Removing [xml:space="preserve'] from the text,
Adding a fill color inline.
<svg class="fraction_spinner" width="64" height="64" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle id="CS1_01-intro" cx="32" cy="32" r="25" fill="transparent"/>
<text class="spinner-text spinner-text__casestudy" xml:space="preserve">
<textPath xlink:href="#CS1_01-intro">Longform case study</textPath>
</text>
</svg>
I expect the text to render as it does in Firefox, but to no avail in Chrome and Safari
One of the enhancements in the SVG 2 specification is that textPath elements no longer need only point to path elements. They should now be able to point to any shape. Firefox has implemented that part of the SVG 2 specification, other browsers have not yet done so.
In fairness there are parts of SVG 2 that other browsers have implemented that Firefox has not.
You can draw a circle using a path instead which will work in all browsers.
Use a path instead of the circle:
<svg class="fraction_spinner" width="64" height="64" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!--<circle id="CS1_01-intro" cx="32" cy="32" r="25" fill="rgba(0,0,0,.3)"/>-->
<path id="CS1_01-intro" d="M57,32A25,25 0 0 1 7,32 A25,25,0 0 1 57,32z" />
<text class="spinner-text spinner-text__casestudy" font-size="16" fill="black">
<textPath xlink:href="#CS1_01-intro">Longform case study</textPath>
</text>
</svg>
For a website, I'm trying to add a mask to a processing.js canvas. In Chrome it works, I have a responsive mask using SVG. But in Firefox all my canvas disapears. I know that the were problems with clipping mask in Firefox, but as I understood it's now OK to use clipping mask on FF. So I don't know were is the probleme.
Here is my code :
HTML :
<canvas class=" processing-intro" data-processing-sources="intro.pde"></canvas>
<div class="svg-container">
<svg width="100%" >
<defs>
<clipPath id="clipping" >
<rect class="col-12 rect-cache" width="1280" height="35vw" />
</clipPath>
</defs>
</svg>
</div>
CSS :
.processing-intro{
clip-path: url(#clipping);
}
Any ideas ? Thank you !
Does anyone know a method of changing the height and width of an svg image of a highchart. I'm getting the svg code using
var svg = chart1.getSVG();
The code itself then is :
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="font-family:'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="600" height="300"><desc>Created with Highstock 4.2.5</desc><defs><clipPath id="highcharts-11"><rect x="0" y="0" width="517" height="300"></rect></clipPath></defs><rect x="0" y="0" width="600" height="300" fill="#FFFFFF" class=" highcharts- ... etc
I've tried changing the height and width properties in this piece of code but it doesn't seem to work properly. I've also tried using the Viewbox method as well but that seems to make it too small. realistically I just need to change the height as the width seems to be okay, but if I could I would like to increase the width a small bit.I'm trying to print the svg in a pdf to show the charts but their not showing up true to their size (which is expected)
Any Ideas?
Thanks!
not able to zoom SVG images in iBooks for iPad (epub3.0 fixed layout) when using rect or circle:
<svg version="1.1" viewBox="0 0 2048 2048" preserveAspectRatio="xMidYMid meet">
<g id="viewport" transform="translate(200,200)">
<g style="fill: #ffffff; stroke:#000000">
<rect width="2048" height="2048" style="fill:green; stroke:black" />
<circle cx="1024" cy="1024" r="1024" style="fill:black; stroke:black" />
<!--path d="M 0 0 H 2048 V 2048 H 0 Z"/-->
</g>
</g>
</svg>
Image is zoomable when using path:
<svg version="1.1" viewBox="0 0 2048 2048" preserveAspectRatio="xMidYMid meet">
<g id="viewport" transform="translate(200,200)">
<g style="fill: #ffffff; stroke:#000000">
<!--rect width="2048" height="2048" style="fill:green; stroke:black" /-->
<!--circle cx="1024" cy="1024" r="1024" style="fill:black; stroke:black" /-->
<path d="M 0 0 H 2048 V 2048 H 0 Z"/>
</g>
</g>
</svg>
Any idea?
Thanks
Well, I don't have a solution, but I have similar/identical behavior.
I have four SVG images in an ePub3.0 that passes all ePubcheck, loads fine on the Mac using iBooks, and synchs to an iPad fine using iTunes, and displays fine on the iPad
Three of the SVG images also zoom fine on both Mac and iPad (click on the image to zoom it)
One of the SVG images sort of blows up on the Mac. You only see the lower left portion of it.
The same problem SVG image won't zoom at all on the iPad. The iPad simply skips to the next page
The problem SVG image does NOT have any rect or circle elements. It is all paths. However, it is more complicated, especially since I turned all text into paths to sidestep the !#$$ fonts problems.
All four images are drawn in Inkscape, saved as "Plain SVG" and then edited with a text editor to remove the metadata element that ePub/Kindle does not seem to like.
Like you, I am scratching my head. I am about to throw in the towel and simply render everything as large PNGs.