Following example given:
http://jsfiddle.net/fKy2r/
How can I remove the whitespace between the div's border and the checkbox?
Also, as seen in the example, color changes with css are possible if using svg directly in html. When following code is used:
<object class="svg" type="image/svg+xml" data="checkbox.svg"></object>
Color changes are no longer possible with the external css file. IS there a chance to make it work?
You have to change the viewBox attribute of the svg element, try with 80 80 350 350, it's not perfect because the path doesn't use integer coordinates, you'd better redraw the path using non-fractional coordinates.
If you include the image via the object element, it's loaded in a way that the CSS can't affect its content.
Related
I've been through hell and back trying to get an SVG colored directly through CSS without changing the properties in the actual file.
I am trying to fill an SVG in CSS with a new color but I don't get it to work.
Targeting the SVG element inside the object element seems to work with the CSS fill: red property in the Inspector of Google Chrome, but doing the same in code doesn't do anything.
The original SVG file doesn't have any fill properties.
If someone could tell me what I can do about this, it'd be awesome
Assuming you are using the contents of the SVG and not just as an image/object:
I've been through the same process you have, wasting many days trying to figure this out. Months later, I found out there's a simple attribute you can place on the file to achieve this. I know you said you didn't want to change the file, so if you don't - you can use the dirty trick I did which is using javascript to take out the contents of the SVG, create a new div and place the contents inside of it.
If you can modify the file slightly, though, you can add:
fill="currentColor"
And then it will take the color of its ancestor.
<svg ...>
<path fill="currentColor" ... />
</svg>
I have a SVG logo i want to place a few times on a single page. Each time it should show up in a different color. That colors are defined via the Wordpress backend. The colors get applied with a snippet like that:
<div class="logo" style="fill:<?php the_field('op-about-color', 'option'); ?>;"></div>
The SVG is placed in the CSS and is base64 encoded. Inside the <svg>tag i've also included the class logotest. But the problem is the SVG isn't getting colored. I've created an example pen with the base64 encoded svg:
http://codepen.io/rpkoller/pen/DuqBh
It stays black.Opposite to the fact that the inline style filled it red and even the assignment of the fill color green for the sktest class has no effect at all.
If i place an unencoded svg code right into the html into a div everything works as expected. Inline style assignment as well as with the logotest class:
http://codepen.io/rpkoller/pen/rdFup
Is there a way to get things going with the base64 variant? Best regards Ralf
Your problem is in your implementation. It's not necessarily that base64 is the issue so to speak, but the difference between including the image as a CSS background, versus including it in HTML.
In HTML... You literally can read the code of the SVG in the HTML. Because that HTML markup exists in the DOM, it is editable via CSS through your classes. If you were to right click the page and click "View page source" you would see the code of the SVG in the HTML.
In CSS, you are adding the image as a background image. Background images don't get any sort of HTML markup that is outputted into the DOM. It is... an "effect" if you want to say it that way, which is applied to some HTML element that you define. If you right click the page and click "View page source" you will see the element that you are applying the background image to, but there is no additional markup outputted that further CSS could then read and modify.
What are your options? Well, you could apply the inline styling directly to the SVG image, but that isn't in any way dynamic, so you won't be able to do your back-end snippet for class names and such.
The other option is to include the SVG like you have done already, which is called "Inline SVG". This way you can effect it with CSS code.
I have a div with an background image assigned in my CSS. Its an svg file. Is there any possibility I can access the paths to change their color, even though its a background image?
You can add a
<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>
instruction at the top of your SVG file, then define the styles in the stylesheet.
See http://www.w3.org/TR/SVG/styling.html#ReferencingExternalStyleSheets.
I'm not aware of any way you can access paths of externally linked svg files (like in an img or object tags), but if you include the svg xml directly in your page you can access the paths, so you make a 2nd div with the same width, height & x, y position, give it a z-index below your foreground div and put the svg xml in side the background div you can simulate what you are trying to do.
Here's a jsfiddle showing how to use JQuery to load the svg image via get ajax request, change up the path styling and then embed the modified svg xml into the background div:
http://jsfiddle.net/webchemist/j2Dgq/
Edit
jsfiddle updated to work in IE9, the problem was the cross site ajax request to wikimedia not the inline svg...
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Changing SVG image color with javascript
I'd like to change the fill of an SVG image when I hover over it.
Right now I have a black question mark exported from Illustrator to SVG.
I can put on my page with the img tag and it displays fine, however I have no idea how to change the color in code.
If you need to do hover effects in svg you shouldn't use <img> tags. Instead reference the svg with an <iframe>, <object> or <embed> tag. If you want to save a http GET request you can put the svg markup inline in the html document.
Here's an example showing a simple fill hover effect inside an svg, and another one (slightly more complex that creates an outline on hover using a filter). Anyway, it's basically about applying a :hover CSS rule to set the fill color.
An example with all of the above ways of using svg can be seen here.
SVG Files can be modified directly from javascript, i.e. properties of the "image" are accessible from within the DOM.
Look at this post from stack overflow: modify stroke and fill of svg image with javascript
It's important to remember that to do so, you cannot enclose the svg file in the common HTML <img/> tag, use instead the <svg>...</svg> as shown in the post.
EDIT: svg on w3schools
I added a link to w3schools so you can see more properties of the svg object
Have Fun
If you can post your code, maybe we can troubleshoot it for you.
Try following this: http://tutorials.jenkov.com/svg/svg-and-css.html
Alternatively (not exclusive to SVG), use this type of code with different images:
<img src="image1.svg"
onmouseover="this.src='image2.svg'"
onmouseout="this.src='image1.svg'">
Live demo: http://jsfiddle.net/JNChw/
I have a project where I want to put simple graphic backgrounds into table cells. background-image and a small svg file works great!
But I would really like to keep the source all in one file. That is, I would like to be able to define the image in the HEAD, and refer to it in the inline STYLE css.
I have tried various combinations of ID attributes in the svg and hash references in a css url() function, but no success. This would seem to be a desirable thing to do, but looking around, I haven't seen a hint of an idea. Which tells me either it cannot be done, or it is done some other way...
Suggestions?
You can save your svg file elsewhere and put that up in an iframe.
<iframe src="index.svg" width="100%" height="100%" />
There might be other methods too..
Best tuts for svg is found MDN.
Actually after asking the question and thinking about it, I realized I had read the answer already. You need to use a a data url to create an in-line svg graphic. This you can give to the background-image property of a css class, as thus:
{background-image:url(
"data:image/svg+xml;utf8,\
...\
");}
The encoding utf8 will allow you to type in the code directly, escaping the new lines with backslashes and avoiding double quotes (as far as I know;-). Now you just set the CLASS of the TD and it works great!
Now all I have to do is figure out how to align the background on the bottom rather than the top...
This code might also work:
<svg>
<use xlink:href="..." />
</svg>