SVG Mask not rendering on page - svg

I created a simple SVG star image and a applied a mask to it. When I put the code into CodePen it looks as it should. So does when I test at W3 Schools and RapidTools.com, however the SVG code when used on my website does not mask correctly. It is not masking at all. Here is my SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256" width="256" height="256">
<mask id="half" x="0" y="0">
<rect fill="white" height="100%" width="36%" y="0"></rect>
</mask>
<path d="M167.55 84.26L256 97.79L192 163.38L207.11 256L128 212.26L48.89 256L64 163.38L0 97.79L88.45 84.26L128 0L167.55 84.26Z" id="b2cMUKCN2H" fill="#f3cc4a" mask="url(#half)"></path>
<path d="M167.25 84.61L255 98.02L191.5 163.1L206.49 255L128 211.61L49.51 255L64.5 163.1L1 98.02L88.76 84.61L128 1L167.25 84.61Z" id="amyYzznmg" stroke="#9e9e9e" stroke-width="2" fill-opacity="0"></path>
</svg>
I put this code in several test sites and it is working there. Am I missing something? Any ideas would be helpful.
Cheers!


Found out what it was...
Duh moment really.... I had several of the SVG on the same page and all used the same Mask ID.
Cheers

Related

Responsive full width svg logo

So I have this logo that fits the whole page. Is there anyway that, when the browser is resized I can move these paths? That way the height stays the same?
Example of what I want to achieve
Here's my svg code
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1440 52" style="enable-background:new 0 0 1440 52;" xml:space="preserve">
<path d="M1428.4,6.9c-2.5-2.5-6-3.7-10.5-3.7h-7.6h-9.5v19.1H16.3V3.1H7.8v46.8h8.5V30.7h1384.5v19.1h0h9.4V30.6h7.5
c2.3,0,4.3-0.3,6-1c1.8-0.7,3.3-1.7,4.5-2.9c1.2-1.2,2.2-2.7,2.8-4.5c0.7-1.7,1-3.6,1-5.8C1432.2,12.1,1430.9,9.4,1428.4,6.9z
M1421.4,20.1c-1,1-2.8,1.9-5.2,2h-6v-12h6c2.3,0,4,0.6,5.2,1.8s1.7,2.7,1.7,4.4C1423.1,18.5,1421.8,19.8,1421.4,20.1z" />
</svg>

you can do something like this by using preserveAspectRatio="none" for the svg element together with a fixed height and width:100%. This would give tou what you need but the the stroke would be scaled differently on the vertical and horizontal.
To fix it you need to add vector-effect="non-scaling-stroke" for the path.
svg{height:100px; width:100%}
<svg viewBox="0 0 100 20" preserveAspectRatio="none">
<path stroke="black" stroke-width="5" vector-effect="non-scaling-stroke" d="M 1,5V15M1,10H97"/>
</svg>

Yes it is possible, with a bit of trickery. Below is a modified verion of your SVG that behaves how you want.
This matches your SVG exactly, but has a limitation. The trick we are using relies on extending the middle bar a long way to the left. Then covering up the left end of the bar with your vertical piece. But in your original SVG the vertical piece is not right at the left end of your SVG. So I've had to hide some of the extension with a white rectangle. This assumes your background will also be white. If it isn't you'll need to change that white rectangle to be the same colour as your page background.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="52">
<defs>
<path id="middle-and-right" transform="translate(-1440 0)"
d="M1428.4,6.9c-2.5-2.5-6-3.7-10.5-3.7h-7.6h-9.5v19.1
h -3000 v 8.4 h 3000
v19.1h0h9.4V30.6h7.5 c2.3,0,4.3-0.3,6-1c1.8-0.7,3.3-1.7,4.5-2.9c1.2-1.2,2.2-2.7,2.8-4.5c0.7-1.7,1-3.6,1-5.8C1432.2,12.1,1430.9,9.4,1428.4,6.9z
M1421.4,20.1c-1,1-2.8,1.9-5.2,2h-6v-12h6c2.3,0,4,0.6,5.2,1.8s1.7,2.7,1.7,4.4C1423.1,18.5,1421.8,19.8,1421.4,20.1z" />
</defs>
<use xlink:href="#middle-and-right" x="100%"/>
<rect x="-1" y="3.1" width="10" height="46.8" fill="white"/>
<rect x="7.8" y="3.1" width="8.5" height="46.8"/>
</svg>
If you want to get a better idea how the trick works, have a look at this version. I've modified the SVG to make the trick more apparent.
svg {
background-color: red;
overflow: visible;
}
rect {
opacity: 0.5;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="52">
<defs>
<path id="middle-and-right" transform="translate(-1440 0)"
d="M1428.4,6.9c-2.5-2.5-6-3.7-10.5-3.7h-7.6h-9.5v19.1
h -3000 v 8.4 h 3000
v19.1h0h9.4V30.6h7.5 c2.3,0,4.3-0.3,6-1c1.8-0.7,3.3-1.7,4.5-2.9c1.2-1.2,2.2-2.7,2.8-4.5c0.7-1.7,1-3.6,1-5.8C1432.2,12.1,1430.9,9.4,1428.4,6.9z
M1421.4,20.1c-1,1-2.8,1.9-5.2,2h-6v-12h6c2.3,0,4,0.6,5.2,1.8s1.7,2.7,1.7,4.4C1423.1,18.5,1421.8,19.8,1421.4,20.1z" />
</defs>
<use xlink:href="#middle-and-right" x="100%"/>
<rect x="-1" y="3.1" width="10" height="46.8" fill="white"/>
<rect x="7.8" y="3.1" width="8.5" height="46.8"/>
</svg>
However if you don't mind the vertical piece on the left end being moved so it's hard up against the left side of the SVG, then we can remove that restriction regarding the background. The new version below will work for any page background colour.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="52">
<defs>
<path id="middle-and-right" transform="translate(-1440 0)"
d="M1428.4,6.9c-2.5-2.5-6-3.7-10.5-3.7h-7.6h-9.5v19.1
h -3000 v 8.4 h 3000
v19.1h0h9.4V30.6h7.5 c2.3,0,4.3-0.3,6-1c1.8-0.7,3.3-1.7,4.5-2.9c1.2-1.2,2.2-2.7,2.8-4.5c0.7-1.7,1-3.6,1-5.8C1432.2,12.1,1430.9,9.4,1428.4,6.9z
M1421.4,20.1c-1,1-2.8,1.9-5.2,2h-6v-12h6c2.3,0,4,0.6,5.2,1.8s1.7,2.7,1.7,4.4C1423.1,18.5,1421.8,19.8,1421.4,20.1z" />
</defs>
<use xlink:href="#middle-and-right" x="100%"/>
<rect x="0" y="3.1" width="8.5" height="46.8"/>
</svg>

SVG: How to reduce repeated objects that only differ in style?

I'm drawing a complex path twice with different transformations and styles. The first time as an outline with no fill and the second time as a fill with no outline with a different transformation.
Below is the SVG code. Note that the paths are the same. Only the style and transformations are different. Is there a way to optimise this so that I only need to define the path once? I was looking for a way to define a variable that I could use twice but couldn't find anything.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="300">
<g opacity="1" stroke-linecap="round" stroke-linejoin="round">
<path d="M0,14.316L5.498,0H7.539L13.398,14.316H11.24L9.57,9.98H3.584L2.012,14.316ZM4.131,8.438H8.984L7.49,4.473C7.035,3.268,6.696,2.279,6.475,1.504C6.292,2.422,6.035,3.333,5.703,4.238ZM16.309,14.316H14.678V0H16.436V5.107C17.178,4.176,18.125,3.711,19.277,3.711C19.915,3.711,20.519,3.84,21.089,4.097C21.659,4.354,22.127,4.715,22.495,5.181C22.863,5.646,23.151,6.208,23.359,6.865C23.568,7.523,23.672,8.226,23.672,8.975C23.672,10.752,23.232,12.126,22.354,13.096C21.475,14.066,20.42,14.551,19.189,14.551C17.965,14.551,17.005,14.04,16.309,13.018ZM16.289,9.053C16.289,10.296,16.458,11.195,16.797,11.748C17.35,12.653,18.099,13.105,19.043,13.105C19.811,13.105,20.475,12.772,21.035,12.104C21.595,11.437,21.875,10.443,21.875,9.121C21.875,7.767,21.606,6.768,21.069,6.123C20.532,5.479,19.883,5.156,19.121,5.156C18.353,5.156,17.689,5.49,17.129,6.157C16.569,6.825,16.289,7.79,16.289,9.053ZM32.578,10.518L34.307,10.742C34.118,11.934,33.634,12.866,32.856,13.54C32.078,14.214,31.123,14.551,29.99,14.551C28.571,14.551,27.43,14.087,26.567,13.159C25.705,12.231,25.273,10.902,25.273,9.17C25.273,8.05,25.459,7.07,25.83,6.23C26.201,5.391,26.766,4.761,27.524,4.341C28.283,3.921,29.108,3.711,30,3.711C31.126,3.711,32.048,3.996,32.764,4.565C33.48,5.135,33.939,5.944,34.141,6.992L32.432,7.256C32.269,6.559,31.981,6.035,31.567,5.684C31.154,5.332,30.654,5.156,30.068,5.156C29.183,5.156,28.464,5.474,27.91,6.108C27.357,6.743,27.08,7.747,27.08,9.121C27.08,10.514,27.347,11.527,27.881,12.158C28.415,12.79,29.111,13.105,29.971,13.105C30.661,13.105,31.237,12.894,31.699,12.471C32.161,12.048,32.454,11.396,32.578,10.518Z" transform="translate(210 150) rotate(6.093) scale(5.22 5.22) translate(0,-14.551)" style="stroke:rgb(255,0,0);stroke-opacity:0.6;stroke-width:1.2;fill:none"/>
<path d="M0,14.316L5.498,0H7.539L13.398,14.316H11.24L9.57,9.98H3.584L2.012,14.316ZM4.131,8.438H8.984L7.49,4.473C7.035,3.268,6.696,2.279,6.475,1.504C6.292,2.422,6.035,3.333,5.703,4.238ZM16.309,14.316H14.678V0H16.436V5.107C17.178,4.176,18.125,3.711,19.277,3.711C19.915,3.711,20.519,3.84,21.089,4.097C21.659,4.354,22.127,4.715,22.495,5.181C22.863,5.646,23.151,6.208,23.359,6.865C23.568,7.523,23.672,8.226,23.672,8.975C23.672,10.752,23.232,12.126,22.354,13.096C21.475,14.066,20.42,14.551,19.189,14.551C17.965,14.551,17.005,14.04,16.309,13.018ZM16.289,9.053C16.289,10.296,16.458,11.195,16.797,11.748C17.35,12.653,18.099,13.105,19.043,13.105C19.811,13.105,20.475,12.772,21.035,12.104C21.595,11.437,21.875,10.443,21.875,9.121C21.875,7.767,21.606,6.768,21.069,6.123C20.532,5.479,19.883,5.156,19.121,5.156C18.353,5.156,17.689,5.49,17.129,6.157C16.569,6.825,16.289,7.79,16.289,9.053ZM32.578,10.518L34.307,10.742C34.118,11.934,33.634,12.866,32.856,13.54C32.078,14.214,31.123,14.551,29.99,14.551C28.571,14.551,27.43,14.087,26.567,13.159C25.705,12.231,25.273,10.902,25.273,9.17C25.273,8.05,25.459,7.07,25.83,6.23C26.201,5.391,26.766,4.761,27.524,4.341C28.283,3.921,29.108,3.711,30,3.711C31.126,3.711,32.048,3.996,32.764,4.565C33.48,5.135,33.939,5.944,34.141,6.992L32.432,7.256C32.269,6.559,31.981,6.035,31.567,5.684C31.154,5.332,30.654,5.156,30.068,5.156C29.183,5.156,28.464,5.474,27.91,6.108C27.357,6.743,27.08,7.747,27.08,9.121C27.08,10.514,27.347,11.527,27.881,12.158C28.415,12.79,29.111,13.105,29.971,13.105C30.661,13.105,31.237,12.894,31.699,12.471C32.161,12.048,32.454,11.396,32.578,10.518Z" transform="translate(20 162) rotate(-6.093) scale(5.22 5.22) translate(0,-14.551)" style="stroke:none;fill-opacity:0.5;fill:rgb(0,0,0)"/>
</g>
</svg>

I have solved this using the <use> element as suggested in the comments. <defs> is used when defining the path to prevent it being drawn.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="300">
<defs>
<g id='path1' stroke-linecap="round" stroke-linejoin="round" transform="scale(5.22) translate(0,-14.551)">
<path d="M0,14.316L5.498,0H7.539L13.398,14.316H11.24L9.57,9.98H3.584L2.012,14.316ZM4.131,8.438H8.984L7.49,4.473C7.035,3.268,6.696,2.279,6.475,1.504C6.292,2.422,6.035,3.333,5.703,4.238ZM16.309,14.316H14.678V0H16.436V5.107C17.178,4.176,18.125,3.711,19.277,3.711C19.915,3.711,20.519,3.84,21.089,4.097C21.659,4.354,22.127,4.715,22.495,5.181C22.863,5.646,23.151,6.208,23.359,6.865C23.568,7.523,23.672,8.226,23.672,8.975C23.672,10.752,23.232,12.126,22.354,13.096C21.475,14.066,20.42,14.551,19.189,14.551C17.965,14.551,17.005,14.04,16.309,13.018ZM16.289,9.053C16.289,10.296,16.458,11.195,16.797,11.748C17.35,12.653,18.099,13.105,19.043,13.105C19.811,13.105,20.475,12.772,21.035,12.104C21.595,11.437,21.875,10.443,21.875,9.121C21.875,7.767,21.606,6.768,21.069,6.123C20.532,5.479,19.883,5.156,19.121,5.156C18.353,5.156,17.689,5.49,17.129,6.157C16.569,6.825,16.289,7.79,16.289,9.053ZM32.578,10.518L34.307,10.742C34.118,11.934,33.634,12.866,32.856,13.54C32.078,14.214,31.123,14.551,29.99,14.551C28.571,14.551,27.43,14.087,26.567,13.159C25.705,12.231,25.273,10.902,25.273,9.17C25.273,8.05,25.459,7.07,25.83,6.23C26.201,5.391,26.766,4.761,27.524,4.341C28.283,3.921,29.108,3.711,30,3.711C31.126,3.711,32.048,3.996,32.764,4.565C33.48,5.135,33.939,5.944,34.141,6.992L32.432,7.256C32.269,6.559,31.981,6.035,31.567,5.684C31.154,5.332,30.654,5.156,30.068,5.156C29.183,5.156,28.464,5.474,27.91,6.108C27.357,6.743,27.08,7.747,27.08,9.121C27.08,10.514,27.347,11.527,27.881,12.158C28.415,12.79,29.111,13.105,29.971,13.105C30.661,13.105,31.237,12.894,31.699,12.471C32.161,12.048,32.454,11.396,32.578,10.518Z"/>
</g>
</defs>
<use xlink:href="#path1" transform="translate(210 150) rotate(6.093)" style="stroke:rgb(255,0,0);stroke-opacity:0.6;stroke-width:1.2;fill:none"/>
<use xlink:href="#path1" transform="translate(20 162) rotate(-6.093)" style="stroke:none;fill-opacity:0.5;fill:rgb(0,0,0)"/>
</svg>

Masking an SVGPattern

fiIs it possible to Mask an SVGPattern?
I've made the following SVG, but I can't get the mask to work.
Or should I be using clipPath?
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="160px" height="600px" viewBox="0 0 160 600" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="circlePattern" patternUnits="userSpaceOnUse"
x="0" y="0" width="10" height="10"
viewBox="0 0 10 10" fill="blue" >
<circle cx='4' cy='4' r='4'/>
</pattern>
<clipPath id="clipPath" maskUnits="userSpaceOnUse">
<rect x="0" y="0" width="200" height="100" fill="white" />
</clipPath>
</defs>
<!-- Outline the drawing area in blue -->
<g id="box">
<rect fill="url(#circlePattern)" width="160" height="600" clip-path="url(#clipPath)"/>
</g>
</svg>
UPDATE: (I would like to use this complex path)
I can't seem to use this path to create the mask/clipPath
<path style="fill:#FFFFFF;" d="M9.35,37.5c4.1,2.467,8.566,3.7,13.4,3.7
c7.667,0,13.783-2.05,18.35-6.15c5.066-4.566,7.6-11.167,7.6-19.8c0-5.7-2.367-12.133-7.1-19.3c-4.1-6.267-9.7-12.684-16.8-19.25
c-5.133-4.8-10.383-8.983-15.75-12.55c-2.4-1.6-3.883-2.6-4.45-3c-1.733-1.033-3.267-1.8-4.6-2.3h-0.05c-1.3,0.5-2.8,1.267-4.5,2.3
c-0.633,0.434-2.133,1.417-4.5,2.95c-5.467,3.667-10.867,8-16.2,13c-6.967,6.566-12.467,12.917-16.5,19.05
c-4.633,7.1-6.95,13.467-6.95,19.1c0,8.633,2.534,15.233,7.6,19.8c4.567,4.1,10.684,6.15,18.35,6.15c4.833,0,9.3-1.233,13.4-3.7
c4-2.367,7.1-5.6,9.3-9.7C2.25,31.9,5.383,35.133,9.35,37.5z"/>

Your mask rect has no fill specified so it will use the default which is black i.e. i.e. rgba(0, 0, 0, 1). So the luminance of the mask is 0 everywhere and you see nothing.
If you change the fill on the mask <rect> to fill="white" you'll see the mask act as a clip which would seem to be what you're looking for. Other colours like "orange" or "blue" as they have a luminance which is neither 0 nor 1 will give you an intermediate effect.
clipPaths clip a shape to a boundary. Masks generally modify colours, you can use them to clip by having a white mask but if all you want is to clip something then a clipPath is faster.
clipPaths and masks can contain any graphics element including a path.

SVG rotate text with % as Unit

I try to rotate a svg text. i get the position of the text as % i.e. 15% by calling a php function from xslt. the problem is that i can not rotate a svg object using %. it works if i use a digit number instead.
Below i present the problem as simplified:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://ww.w3.org/2001/xml-events" xmlns:php="http://php.net/xsl" version="1.1" baseProfile="full">
<text x="50%" y="50%" transform="rotate(-90 50% 50%)">rotateMe</text>
<line x1="50%" y1="47%" x2="60%" y2="47%" stroke="black" stroke-width="2px"/>
</svg>
this pic is in the middle of my browser screen
And i want that it looks like this:
but it dont work because of %
transform="rotate(-90 **50% 50%**)"
it is a requirement for me to use % for the coordinates. Any ideas or solution to my problem?
Thank you in advanced.

You can translate the co-ordinates using an inner <svg> element. The example below displays as per your "i want that it looks like this" bitmap on Firefox.
If you can't see the text on whatever browser you are using, try adding overflow="visible" to the inner <svg> element so you can see where it ends up. Not all browsers support the dominant-baseline attribute so you may need to fiddle about with the text's y attribute instead.
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg x="50%" y="50%" width="100" height="100">
<text text-anchor="end" dominant-baseline="text-before-edge" transform="rotate(-90 0 0)">rotateMe</text>
</svg>
<line x1="50%" y1="47%" x2="60%" y2="47%" stroke="black" stroke-width="2px"/>
</svg>

Animate text in SVG

I'm having some trouble trying to animate some text around a circular path in a repeating loop. Basically I'm trying to simulate a record player with some text on it that rotates around with the record as it spins. I just made a simple record player in Illustrator quick and saved it as an svg file then threw the relevant parts in on a webpage. I pretty new to SVG animations and was wondering how to best approach this. I'm using javascript/jQuery to handle some other events on the page so that's how I was planning on approaching the animations here too. Is there any easy way to do this in just SVG? If possible I'd really rather not have to manually calculate the proper value by which to change the rotation and x/y coordinates per animation iteration in javascript, but if so then fair enough. Here's the SVG output (from Illustrator) for my record (the circular lines show where I had planned on having text).
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="800px" height="600px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">
<path fill="#CCCCCC" stroke="#FFFFFF" stroke-width="1.24473" d="M400,5C237.07568,5,105,137.07568,105,300
c0,162.9248,132.07568,295,295,295c162.92383,0,295-132.0752,295-295C695,137.07568,562.92383,5,400,5z M400,425.7168
c-69.43164,0-125.71729-56.28418-125.71729-125.7168c0-69.43164,56.28564-125.71729,125.71729-125.71729
c69.43262,0,125.7168,56.28564,125.7168,125.71729C525.7168,369.43262,469.43262,425.7168,400,425.7168z"/>
<circle fill="#CCCCCC" stroke="#FFFFFF" stroke-width="1.24473" cx="399.99976" cy="300" r="11.20239"/>
<circle fill="none" stroke="#FFFFFF" stroke-width="1.20836" cx="399.99951" cy="300" r="265.83936"/>
<circle fill="none" stroke="#FFFFFF" stroke-width="1.05836" cx="399.99951" cy="300" r="232.83936"/>
<circle fill="none" stroke="#FFFFFF" stroke-width="0.90382" cx="399.99951" cy="300" r="198.83936"/>
<circle fill="none" stroke="#FFFFFF" stroke-width="0.75382" cx="399.99951" cy="300" r="165.83936"/>
<rect x="43.1084" y="1.00049" fill="none" stroke="#CCCCCC" stroke-width="1.09253" width="713.78223" height="597.99951"/>
<rect id="name" x="351" y="186.5" fill="none" width="96.79297" height="16"/>
</svg>
Any help would be greatly appreciated, thanks!

Something like this: http://hoffmann.bplaced.net/svgtest/textonapath02.svg or http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2008/textPath1.svg perhaps. These animated the startOffset attribute of a textPath.

Resources