Unsure what's going on with my SVG icons since updating to the latest Chrome. They still appear to display correctly in Safari and Firefox the only other browsers that I am supporting. Was working perfectly in prior versions of Chrome I've been testing with.
Appears that there are two or more path elements inside the clipPath element in the examples where the icons are not rendering as expected. According to: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath I can place any number of allowed elements inside the clipPath so I believe that I am doing this right... so lost as to why it suddenly has broken down on me.
So basically if you look at the images you will see the kill cockroaches and the eye ball look different than expected on the left to how they are now rendering on the right hand side...
http://codepen.io/dapinitial/pen/Kflpv
<svg>
<defs>
<clipPath id="diff-path">
<path d="M17.19,7.349 C18.753,7.349 20.019,8.626 20.019,10.202 C20.019,11.777 18.752,13.056 17.19,13.056 C15.628,13.056 14.361,11.778 14.361,10.202 C14.361,8.625 15.627,7.349 17.19,7.349 L17.19,7.349 L17.19,7.349 Z" />
<path d="M0.19,10.201 C0.19,10.201 6.833,20.152 17.19,20.152 C27.547,20.152 34.19,10.201 34.19,10.201 C34.19,10.201 27.414,0.249 17.19,0.249 C6.966,0.249 0.19,10.201 0.19,10.201 L0.19,10.201 Z M10.125,10.201 C10.125,6.269 13.288,3.082 17.19,3.082 C21.091,3.082 24.254,6.269 24.254,10.201 C24.254,14.132 21.091,17.32 17.19,17.32 C13.288,17.32 10.125,14.132 10.125,10.201 L10.125,10.201 Z"></path>
</clipPath>
</defs>
</svg>
You need to specify a different "clip-rule" attribute for your clip-path. If I add clip-rule="evenodd" to your clip-path element it fixes things.
Related
I would like to be able to specify some kind of transformation that would, given an arbitrary SVG node remap all of its pixel values to cover the full (0-100% or 0-255) range of intensities while avoiding clipping.
The feComponentTransfer filter with feFuncX linear mapping functions almost offers what I want but seems to lack the ability to refer to the global maximum intensity of the input node, is there some clever way around it ?
There is no "auto-brighten" feature that will do what you want.
You would have have to do it yourself by reading all the colours yourself with javascript and work out the appropriate brighten/saturate value.
But as a good-enough approach, a saturate filter with a value of 200% might get something close to what you want.
svg rect:hover {
filter: saturate(200%);
}
<svg>
<rect width="50%" height="100%" fill="cadetblue"/>
<rect x="50%" width="50%" height="100%" fill="cornsilk"/>
</svg>
I have an SVG that contains this line:
<text transform="translate(-50%,-50%)" text-anchor="middle" class="st11 st13" x="389" y="440" font-family="Roboto Condensed" style="fill: #ffffff">
99
</text>
In Chrome I get this error but it seems to be fine on Safari
Error: attribute transform: Expected ')', "translate(-50%,-50%)".
In SVG 1.1 transform values must be numbers i.e. no units are allowed.
In SVG 2 transforms are supposed to be CSS properties with extra rules to preserve backwards compatibility for the unitless SVG 1.1 case.
Perhaps Safari has implemented SVG 2 transforms, whereas Chrome has not yet done so. SVG 2 is a work in progress for all browsers. The most cross-browser way of doing things would be to omit units or use an alternative way of producing a percentage transform if you need it.
I'd like to do an animation to an element when hovering it.
As I do use svg-elements for both situations (standard and hover-state) I guess I must somehow manipulate the first svg-element when hovering it by editing the svg-code inline.
I basically'd need a starting point there:
How would I "redraw" in an animated manner the hover-image and not just swap it?
Do I need a 3rd party library (which)?
If I had multiple of these situations, how would I keep my code clean by not having 10 svg-codes inline within my html-source?
Thanks for your answer(s)!
The code for the svg-image(s) is here
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800">
<defs><style>.cls-1,.cls-2{fill:none;stroke:#000;}.cls-1{stroke-miterlimit:10;stroke-width:7px;}.cls-2{stroke-linejoin:bevel;stroke-width:5px;}</style></defs>
<title>arrows_demoZeichenfläche 1</title>
<line class="cls-1" x1="325.5" y1="333" x2="325.5" y2="539"/>
<polyline class="cls-2" points="242 455.67 325.75 539.42 409.42 455.75"/><path class="cls-1" d="M670.5,135.79c0,11.62-8,11.73-8,23.35s8,11.68,8,23.3-8,11.65-8,23.28,8,11.64,8,23.26-8,11.63-8,23.25,8,11.63,8,23.25-8,11.63-8,23.25,8,11.63,8,23.25-8,11.62-8,23.25,8,11.62,8,23.25-8,11.63-8,23.25,8,11.63,8,23.25-8,11.62-8,23.25,8,11.62,8,23.25-8,11.63-8,23.25,8,11.63,8,23.25v31"/>
<polyline class="cls-2" points="587 455.67 670.75 539.42 754.42 455.75"/></svg>
You could use JavaScript to manipulate the value of the points attribute, but such changes would be sudden, so the change would look like a stop motion film.
Like this Codepen, what you could do is give a path element a stroke-dasharray that is equal to the getTotalLength of the path in order to "erase" the straight line (of the arrow) off the page, then quickly switch the value of the d attribute, and then "redraw" the line back onto the page?
However, I don't believe that's what you're looking for. I believe HTML5 Canvas, with my limited knowledge about it, would be the more feasible option for what you're trying to accomplish.
Actually, I guess it might be possible using a CSS3 3D transform, like so. The problem, however, is that the line doesn't have any depth, so when you initially set rotateX(90deg) on the path in CSS the line becomes invisible instead of appearing as a straight line...
I'm trying to create an svg element with angular. Currently I'm able to do an ng-repeat but when I try to assign values to my attributes I get an error.
<g ng-repeat="cell in row">
<rect x="{{cell.node.x}}" y="{{cell.node.y}}"></rect>
<text x="10" y="10">{{cell.node.name}}</text>
</g>
Interesting enough cell.node.name does work and shows the name nicelly but cell.node.x and cell.node.y, give me the following error accordingly
Error: Invalid value for attribute x="cell.node.x" Error: Invalid value for attribute y="cell.node.y"
Any ideas?
The newer versions of Angular feature ngAttr attribute bindings, which should avoid the errors caused when the browser validates before Angular kicks in.
Example (from Angular docs):
<svg>
<circle ng-attr-cx="{{cx}}"></circle>
</svg>
Well, it's working, here's a plunk, but you're getting that error because the browser is validating the SVG before it renders it, and at the time of validation, x and y are equal to "{{cell.node.x}}" and "{{cell.node.y}}" respectively. Once angular updates the view, it will indeed put the rectangles where they're supposed to be.
One thing I noticed though, is you're missing the width and height attributes on the rectangle, which will cause them not to show.
There aren't a lot of good ways to suppress this error. I suppose you could make a custom directive that didn't render the SVG elements until after they'd been $compiled.
As blesh hints: making custom directives for the attributes that cause the problem stops the errors in Chrome. There's a solution in this issue on github.
I created a star using Illustrator which I saved as an SVG file. Later in my HTML coding I called that SVG like this:
<object type="image/svg+xml" data="images/star.svg" width="100%" height="100%"></object>
But I am unable to see the image in any browsers. I have tried Safari version 5.0 and Firefox 5.0 versions to preview my html.
Is it possible to get an SVG file to display in a browser?
Yes, it is possible. You can use the object tag, or you can use CSS background-image, or with recent browsers you can embed it directly inline using the<svg> tag. Read this:
http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii
The SVG file format was originally designed for browsers if i am not wrong.
One crude solution to your problem is by using this pre-made SVG sample code:
<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<path id="svg_7" d="m64,143c1,0 95,-44 105,-40c10,4 27,59 27,59" fill-opacity="null" stroke-opacity="null" stroke-width="2" stroke="#995757" fill="#FF8787"/>
</g>
</svg>
Now open up the SVG file you created in Illustrator with Notepad and find something called the ''d'' attribute. Copy the values of the ''d'' attribute. For example in the sample code above you would be copying this: "m64,143c1,0 95,-44 105,-40c10,4 27,59 27,59". Take extra care to include the "" tags while copying.
Now create a new Notepad file and paste the sample code i gave you above. Then replace the ''d'' value with the value you copied from your Illustrator SVG file. Make sure you set this values in the sample code with the ones you prefer. **fill-opacity="null" stroke-opacity="null" stroke-width="2" stroke="#995757" fill="#FF8787"**.
Also make sure you change the width="500" and height="400" values with ones that correspond to the paper size you are using in Illustrator.
Then save the file with an .svg extension at the end of the filename and choose to save as type ''All Files'' instead of ''Text Document''.
Pretty crude solution but i think illustrator creates SVG files that are not exactly browser friendly.