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 !
Related
I'm struggling with resizing clipped svg on my HTML setup. I looked for similar solutions but I could not find any yet. I'm trying to resize clipped svg according to vertical screen viewport. Here is the codepen example of my setup:
.slider-image {
clip-path: url(#clip);
-webkit-clip-path: url(#clip);
}
<div>
<img class="w-full h-full slider-image object-cover absolute top-0 left-0 z-20" src="https://images.unsplash.com/photo-1558611848-73f7eb4001a1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80" >
<svg width="100%" height="90vh" viewBox="0 0 1159 548" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip">
<path d="M989 547.5H0V0H1156L1159 9L1157.5 18.5L1147 89.5L1157.5 126L1120 244.5L1088 309L1041 369.5L989 445.5L962 503.5L989 547.5Z" fill="url(#paint0_linear)"/>
<circle cx="350" cy="168" r="80"/>
</clipPath>
</defs>
</svg>
</div>
https://codepen.io/ilkrclm/pen/oNNMQor?editors=1100
In this case the solution is using clipPathUnits="objectBoundingBox"
The clipPathUnits attribute indicates which coordinate system to use for the contents of the <clipPath> element.
objectBoundingBox indicates that all coordinates inside the <clipPath> element are relative to the bounding box of the element the clipping path is applied to. It means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a length of 1 unit value.
Read about clipPathUnits
Since the object bounding box is considered to have a length of 1 unit you will need to scale the path: transform="scale(0.00086)". The width of the bounding box of the path is 1159. 1/1159 = 0.00086.
I've commented out the circle since in this case is not doing anything.
*{margin:0;padding:0}
.slider-image {
width:100%;
clip-path: url(#clip);
-webkit-clip-path: url(#clip);
}
<div>
<img class="w-full h-full slider-image object-cover absolute top-0 left-0 z-20" src="https://images.unsplash.com/photo-1558611848-73f7eb4001a1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80" >
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<path transform="scale(0.00086)" d="M989 547.5H0V0H1156L1159 9L1157.5 18.5L1147 89.5L1157.5 126L1120 244.5L1088 309L1041 369.5L989 445.5L962 503.5L989 547.5Z" fill="url(#paint0_linear)"/>
<!--<circle transform="scale(0.00086)" cx="350" cy="168" r="80"/>-->
</clipPath>
</defs>
</svg>
</div>
I'm trying to construct a buttons collection for a website. Since the buttons share several properties (colours and effects) I've decided to use SVG. In order to reduce the HTTP requests, I tried to nest several elements and filters inside the same SVG file. The idea is instantiate these elements to construct all the buttons, toggle switches, etc by simply using the <use> tag.
After reading great articles like this, this, and this I'm still not being able to do such thing. I found myself stuck. So I decided to simplify the problem as much as I could within the snippet down bellow.
<style>
svg,
img,
object {
width: 50px;
height: 50px;
border: 1px solid black;
}
h3 {
margin-top: 50px;
}
</style>
<h1>Swimming Veggies. The SVG club that's driving me nuts.</h1>
<h3>This is an inline SVG.</h3>
<svg viewBox="0 0 50 50">
<g id="pool">
<rect width="50" height="50" fill="aqua" />
</g>
<symbol id="tomato">
<circle cx="35" cy="35" r="10" fill="tomato" />
</symbol>
<g id="orange">
<circle cx="15" cy="15" r="12" fill="orange" />
</g>
</svg>
<p>Things work as expected here. The <g> elements #pool and #orange show up while the <symbol id="tomato"> doesn't. Great!</p>
<h3>This is a SVG using <use> to referencing elements from the inline SVG above.</h3>
<svg style="border: 1px solid black;" width="50" height="50">
<use xlink:href="#pool"></use>
<use xlink:href="#tomato"></use>
</svg>
<p>Note that the <symbol id="tomato"> element shows up here like the g elemet "pool". The "orange" element is NOT being <use>d. Works fine. Expected behaviour.</p>
<h3>This is a SVG being put as an IMG.</h3>
<img src="club.svg">
<p>Works fine to me and the absence of the <symbol id="tomato"> is the expeted behaviour. I don't want to use SVG this way though.</p>
<p> Unfortunately, IMGUR didn't accept SVGs and I didn't find an image sharing platform that accepts SVG files. The "club.svg" file has the same content as the commented code at the end of this HTML snippet. The SVG file is located ON THE SAME FOLDER of the HTML file. Sorry for the inconvenience :(</p>
<h3>This is a SVG being put as an OBJECT</h3>
<object type="image/svg+xml" data="club.svg"></object>
<p>This works as expected.</p>
<p>Again, the "club.svg" file content is shown as a comment inside and at the end of this HTML snippet.</p>
<h3>An unsuccessful attempt to extract elements from an OBJECT SVG </h3>
<object type="image/svg+xml" data="club.svg#tomato"></object>
<p>The browser is ignoring the "#tomato" after the file name. Is it possible to extract/manipulate elements inside the SVG file this way? If so, how?</p>
<h3>This is a SVG being put as an external reference.</h3>
<svg>
<use xlink:href="club.svg#pool"></use>
<use xlink:href="club.svg#tomato"></use>
<use xlink:href="club.svg#orange"></use>
</svg>
<p>That would be my preferable way to clone/manipulate elements from an external source (in this case, "club.svg"). Unfortunately, it's not working for me. It's not clonning the element. What am I doing wrong?</p>
<h3>Here goes the club.svg content (it's commented inside the snippet).</h3>
<!--
Down bellow is the code inside the club.svg file:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
<g id="pool">
<rect width="50" height="50" fill="aqua" />
</g>
<symbol id="tomato">
<circle cx="35" cy="35" r="10" fill="tomato" />
</symbol>
<g id="orange">
<circle cx="15" cy="15" r="12" fill="orange" />
</g>
</svg>
-->
By the way... I tried to open up the file on Brave, Opera, Chrome and Safari. All of them show the same results.
Any help will be very much appreciated.
I'm working on a mapping project and using SVG <image> elements as tiles always shows a seam between them. I can avoid the seams if I use <rect> elements with the css property "shape-rendering: crispEdges". However, when I try to fill these <rect> elements with a pattern that contains the tile image, there is some inconsistency in the alignment of the pattern in Chrome and FF (I'm using Chrome 45 and FF 41 right now).
I've isolated the issue in this jsfiddle. All of the transforms, svg size, rect size, etc are directly from the project I'm working on and it should be assumed they can't be changed. I can only change the pattern (or if there's a attribute/property like "shape-rendering: crispEdges" for <image> elements I can change that).
How can I get the pattern tile image to fully cover, and be properly aligned with, the <rect>?
HTML
<!-- change background from white to black to see what's going on -->
<!-- The SVG is large. The <rect> can be located a bit to the right of the center of the SVG -->
<!-- When BG is black, you can see a white edge on the left and bottom -->
<!-- When BG is white, you can see a dark edge on the top and right -->
<body style="background: white;">
<div style="position: fixed; x: 0; y: 0;">
<button onclick="whiteBG()">White BG</button>
<button onclick="blackBG()">Black BG</button>
</div>
<svg height="1965" version="1.1" width="5760" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern x="0" y="0" width="100%" height="100%" patternContentUnits="objectBoundingBox" id="patternSieyywid32k">
<!-- image is base64 encoded 415 x 512 image -->
<image xlink:href="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAIAAcMDAREAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAcIBv/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAG8KAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJKAAAAAAAAAAAAAAAAAAAADrTrQAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAAD/8QAHBAAAgMBAAMAAAAAAAAAAAAAB1AABRcGBDCQ/9oACAEBAAEFAvlZpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJQ9L43RORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXe//xAAUEQEAAAAAAAAAAAAAAAAAAACw/9oACAEDAQE/AWQP/8QAFBEBAAAAAAAAAAAAAAAAAAAAsP/aAAgBAgEBPwFkD//EACYQAAAFBQABBAMBAAAAAAAAAAIFUIPCAAQzktIBAxETYRQwMZD/2gAIAQEABj8C/wArMF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqvX/GB6oPh9vf5fHjx/ff7+lkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbl+/8A/8QAGhAAAQUBAAAAAAAAAAAAAAAAEQExUXGQsP/aAAgBAQABPyHNZEiRIkSJEiRIkSJEiRIkSJEiRIkSJEiRIkSJEiRIkSJEiRIkSK+M0YAVLm1Xd3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d//aAAwDAQACAAMAAAAQJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJAAAAAAAAAAAAAAAAAAAAABJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJ/8QAGREAAwEBAQAAAAAAAAAAAAAAARFQADCQ/9oACAEDAQE/EPKx555555555555555555555555555555555555555552hZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkd//8QAFBEBAAAAAAAAAAAAAAAAAAAAsP/aAAgBAgEBPxBkD//EABsQAAIBBQAAAAAAAAAAAAAAABExASFBkLDR/9oACAEBAAE/EMa1mzZs2bNmzZs2bNmzZs2bNmzZs2bNmzZs2bNmzZs2bNmzZs2bPXuyTRWIcO2tpMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMz/AP/Z"
x="0" y="0" width="1" height="1" preserveAspectRatio="none"></image>
</pattern>
</defs>
<g transform="matrix(0.0049,0,0,0.0049,101.5334,3349.9742)" style="display: inline;">
<rect x="641958.5514" y="-516667.078" width="28275.123699999996" height="32099.475199999986" fill="url('#patternSieyywid32k')" style="shape-rendering: crispEdges;"></rect>
</g>
</svg>
</body>
JS
var whiteBG = function() {
document.querySelector('body').style.background = '#FFF';
}
var blackBG = function() {
document.querySelector('body').style.background = '#000';
}
The best solution I could come up with for this issue was to go back to using image elements, but instead of letting the browser handle the transform, I removed the transform from the group element and used some JS code to apply the transforms manually and update the x, y, width, and height attributes of each image element. Doing it this way, I have control over how to round the result to achieve pixel perfect tiles.
I am working with SVG elements using snapSVG and I noticed that transformation in chrome and firefox doesn't work as it should. The code perfectly works with chrome but not with firefox.
I am trying to rotate an image with a overlaying mask for which the image is rotated in some degree clockwise for which the mask rotates some degrees in counter clockwise. The following generates a transformation matrix that works perfectly in Chrome but not in firefox.
var imageCenterX = imageObj.posx+imageObj.width/2;
var imageCenterY = imageObj.posy+imageObj.height/2;
var transformString = "r"+imageObj.rotate+","+imageCenterX+","+imageCenterY;
var transformStringMask = "r-"+imageObj.rotate+","+imageCenterX+","+imageCenterY;
image.transform(transformString);
mask.transform(transformStringMask);
In chrome:
Image html:
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="imgSrc.jpeg" preserveAspectRatio="none" x="211" y="74.191" width="480" height="480" mask="url('#Si9xqb7h9ys')" id="image1" transform="matrix(0.7071,-0.7071,0.7071,0.7071,-90.0717,410.9296)"></image>
Mask html:
<mask id="Si9xqb7h9ys"><g transform="matrix(0.7071,0.7071,-0.7071,0.7071,354.2614,-226.8807)"><rect x="211" y="74.191" width="298" height="480" fill="#ffffff" stroke="#000000"></rect></g></mask>
In firefox:
Image html:
<image transform="matrix(0.7071,0.7071,-0.7071,0.7071,414.2614,-251.7336)" id="image1" mask="url('#Si9xrhyed2z')" style="" height="600" width="600" y="74.191" x="211" preserveAspectRatio="none" xlink:href="imgSrc.jpeg"></image>
Mask html:
<mask id="Si9xqofuf2z"><g><rect stroke="#000000" fill="#ffffff" style="" height="480" width="298" y="74.191" x="211"></rect></g></mask>
What I saw was that the mask object doesn't even get a transform attribute.
Why is this happening and is there any work around for this issue?
I have a rather large tree diagram modeled in SVG.
It renders well, with vertical scrolling as desired, in IE-9.
In Chrome and Firefox, not so. No scrolling in Chrome but zooming out lets me see a little more.
In Firefox, it is only showing a token amount of the vertical space.
I assume I am missing some attributes in the "svg" element to make it show up correctly in Chrome/Firefox but not sure what.
Here is how the doc source starts:
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100%" width="100%" style="overflow-x: auto; overflow-y: auto;" >
<rect x="685" y="15" rx="10" ry="10" width="380" height="116" style="fill:lightgrey;stroke-width:5;stroke:rgb(0,0,0)" />
<text x="777" y="38" fill="black" font-size = "18" font-family = "sans-serif" font-weight="bold">Folder</text>
<text x="960" y="38" fill="black" font-size = "18" font-family = "sans-serif" font-weight="bold">Content</text>
<rect x="700" y="45" rx="10" ry="10" width="200" height="75" style="fill:powderblue;stroke-width:1;stroke:rgb(0,0,0)" />
................... and so on for 150000 lines ...................
Any ideas on what can be added so it will render in Chrome/Firefox as it does in IE-9?
Hard coding values into "height" and "width" solved the acute problem of no scrolling in Chrome and Firefox.
Making the script that generates the svg smarter to put in appropriate values for "height" and "width" is a better solution but for now, just setting
height="50000" width="2400"
instead of using the % values, worked for me.