I would like to use <use> on my document but I have problem with cascading classes.
I have the following svg:
<svg>
<defs>
<rect id="pattern" class="color-pattern" x="25" y="25" width="50" height="50"/>
</defs>
<g class="color-object">
<use xlink:href="#pattern"/>
</g>
</svg>
with the following css :
.color-pattern {fill:red;}
.color-object .color-pattern {fill:blue;}
JsFiddle
With firefox the rectangle is blue (I seem it's right), with IE10 or Chrome, the rectangle is red.
Is it a issue ? How I can proceed for having a right result on three browsers ?
Thanks for your answers and sorry for my english.
Related
Is there another alternative to letter-spacing in terms of SVG text?
This code is working on Chrome but not on Firefox:
https://developer.mozilla.org/de/docs/Web/CSS/letter-spacing
As you can see there Firefox is not supporting it right now due to a bug. But I really need letter-spacing in both browser. So is there a good anternative for SVG text?
Btw the same is on word-spacing. Working in Chrome perfectly but not on Firefox.
An alternative to letter-spacing that does work on Firefox is the textLength property. Perhaps that will suit you as a workaround?
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example text01 - 'Hello, out there' in blue</desc>
<text x="250" y="150"
font-family="Verdana" font-size="55" fill="blue" >
Hello, out there
</text>
<text x="250" y="200" textLength="600"
font-family="Verdana" font-size="55" fill="blue" >
Hello, out there
</text>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="blue" stroke-width="2" />
</svg>
You can use the parameter "dx".
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="250" y="200" dx="0 20 20 20 20 0 20 20 20 20 20"
font-family="Verdana" font-size="55" fill="blue" >
Hello, out there
</text>
</svg>
My solution was that I create the strings with (multiple)whitespaces in QGIS. This is bad way because if you want to give all elements a bigger space it takes a long time.
But it is easy and works on any browser in the same way. So this is the way to go if you have your data in geojson or topojson.
This was working fine-. Only had problems in Internetexplorer with 2 lines of text - so Leterspacing in actual Browsers like Chrome (√), Safari (√) and IE (√). Only Firefox ...
<svg fill="none" stroke="#838383" stroke-width="1" class="text-line" width="100%" height="400">
<text fill="none" transform="translate(1 1)" textLength="1200" >
<tspan x="0" y="192"><?php the_field('ani_headline_1st'); ?></tspan>
<tspan x="0" y="342"><?php the_field('ani_headline_2nd'); ?></tspan>
</text>
Firefox (desktop) now supports the letter-spacing property, as of version 73. See browser compatibility at the MDN page and the relevant bugzilla.
Firefox for Android still does not support letter-spacing.
I'm trying to create a CSS animation for the fill color of a specific part of a SVG image. For that I'm using keyframes and an 'id' to link the animation and the SVG rectangle. You can see a working example here:
http://jsbin.com/deyaqo/3/
This works for most of the browsers except Safari (and maybe IE, I don't know). I'm not sure if this is because of my implementation or due to the lack of support from this vendor.
Thanks for your time !
You could use the animate element instead.
<svg id="logo" x="0" y="0" width="150" viewBox="12.304 3.974 74.952 22.051" enable-background="new 12.304 3.974 74.952 22.051">
<rect id="laukia"
x="56.74"
y="23.094"
width="17.895"
height="2.932"
fill="black" />
<animate xlink:href="#laukia"
attributeType="XML"
attributeName="fill"
from="red" to="rosybrown"
values="red; blue; green; teal; saddlebrown; peru; plum; rosybrown"
repeatCount="indefinite"
dur="5s" />
</svg>
I want a SVG image (prerendered, but inserted with js in an svg tag, to allow for some further manipulation) to be able to use a predefined pattern, using the "pattern" tag. Sounds simple enough, doesn't it? Well, turns out Chrome (Webkit?) behaves a bit different from any other browsers, and now I'm not sure what the best way would actually be to achieve this.
My svg looks like this:
<svg>
<defs>
<pattern id="specialPattern">...</pattern>
</defs>
<path class="special"></path>
</svg>
and I want paths with the class special to have "pattern" as fill.
Attempt one: Works in Chrome, not in FF or Opera
My first attempt was to simply put this in my css:
.special { fill:url("#specialPattern");}
This actually works in Chrome, though when you think about it, it probably shouldn't. The other browsers I tried interpret this url as relative to the file it's in (the css file), which makes more sense.
Attempt two: Works in FF and Opera, not in Chrome
Next attempt: Provide an absolute url to the pattern.
.special { fill:url("//example.com/styles/svgWithStyleDeclaration.svg#specialPattern");}
While this works as expected in FF and Opera, Chrome now resets the fill instead (I have no idea where it is actually looking for that style)
Attempt three: Works, kind of
Inlining the style in the SVG works everywhere it seems: style="fill:url('#specialPattern')"
And though I guess this is a case where the lines between content and presentation is blurred, in my case at least it would be much better to keep style decclarations elsewhere (not least because this would make my SVG need to be much bigger)
Attempt four: Works (?) but dirty
I haven't tested a lot of browsers, so I'm not sure about how water proof it is, but it seems to me like using a css hack to detect webkit browsers would work:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.special {fill: url("#specialPattern");}
}
.special { fill:url("//example.com/styles/svgWithStyleDeclaration.svg#specialPattern");}
Now, there MUST be a more elegant way to solve this. How should it be done?
Edit: Turns out that IE behaves like Chrome here, so you would also need to make sure IE<=9 has 'fill: url(#specialPattern)'
Here's a Fiddle that I did for manipulating patterns and masks. It's a ratings display in svg xml, in which I wanted to be able to use a percentage for the rating bar.
Fiddle: http://jsfiddle.net/cnLHE/296/
By changing the last line to "width="50", and pressing Run, you can see the rating bar resizes.
<svg width="100%" height="100%" viewBox="0 0 100 20" version="1.1">
<defs>
<pattern id="pattern1" x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="5" style="fill:white" />
</pattern>
<pattern id="pattern2" x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="9" style="fill:white" />
<circle cx="10" cy="10" r="7" style="fill:black" />
</pattern>
<mask id="mask1" x="0" y="0" width="100" height="20" >
<rect x="0" y="0" width="100" height="20"
style="stroke:none; fill: url(#pattern2)"/>
</mask>
<mask id="mask5" x="0" y="0" width="100" height="20" >
<rect x="0" y="0" width="100" height="20"
style="stroke:none; fill: url(#pattern1)"/>
</mask>
</defs>1<rect x="0" y="0" width="500" height="20" fill="url(#pattern2)" style="fill:#2498c7; mask: url(#mask1)"/>
<rect x="0" y="0" width="50" height="20" style="fill:#2498c7; mask: url(#mask5)"/>
</svg>
I didn't have any cross browser issues, BUT, I did have issues with the SVG disappearing intermittently in grid layouts. In webkit with multiple instances in page, they weren't always showing.
Further info available at css-tricks: http://css-tricks.com/using-svg/
Just as the question asks - I'm trying to figure out whether or not it's possible to use some kind of pattern or repeated background image for the stroke of an SVG path.
Is this doable? Or are you limited to colors only?
TIA!
You can use a <pattern> as a stroke e.g.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="p1" patternUnits="userSpaceOnUse" width="32" height="32">
<image xlink:href="http://phrogz.net/tmp/alphaball-small.png" width="32" height="32" />
</pattern>
</defs>
<rect stroke-width="32" stroke="url(#p1)" width="200" height="200" fill="none"/>
</svg>
The pattern can contain <svg> drawing elements or (as here) an image, or both.
You can use the property stroke-dasharray for "patterns" in the stroke:
<line stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" />
With this you can specify the length of strokes and gaps between. For some examples have a look at the MDN example page.
It seems that applying the same CSS transform on hover to an HTML or SVG element does not create the same effect. As you can see in the following fiddle, the p and rect do not behave the same way while scaling, and that is precisely my problem.
http://jsfiddle.net/rKD7T/2/
How could I make the rect behave exactly as the p and scale properly?
I tried scaling the rect with a matrix - taking into account the origin point - but it did not seem to work either, or I did it wrong.
I'd like to stick to CSS solutions here but JS ones might also be an option.
Thanks for your help.
This seems about right.
<div>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<svg>
<g transform="translate(20, 40)">
<rect x="-20" y="-40" width="50" height="100"/>
<g transform="translate(55, 0)" >
<rect x="-20" y="-40" width="50" height="100"/>
</g>
<g transform="translate(110, 0)" >
<rect x="-20" y="-40" width="50" height="100"/>
</g>
<g transform="translate(165, 0)" >
<rect x="-20" y="-40" width="50" height="100"/>
</g>
</g>
</svg>
It works in Firefox trunk but doesn't seem to work with Firefox 16. I haven't tested Firefox Beta or Aurora to see in exactly when it's fixed.