Depending on parent html tag of an SVG object, I would like it's path color to change. Can this be done with SVG? For instance, if a logo is in the header I want it to be red, if it is in the footer I want it to be blue. Here's an example:
<style type="text/css">
#header-img {
fill:blue;
}
#footer-img {
fill:black;
}
</style>
...
<header>
<object id="header-img" type="image/svg+xml" data="myimg.svg" />
</header>
...
<footer>
<object id="footer-img" type="image/svg+xml" data="myimg.svg" />
</footer>
Granted, this can't be done, but is there an alternative without using JavaScript?
Starting again, this is the best question/answer to your problem that I can find:
How to apply a style to an embedded SVG?
It's possible for you to add a linked stylesheet to the file you wish to embed by hand...
Thereby avoiding the use of JavaScript.
I would argue that you should try not to ask redundant questions.
We'd have both done well to have sourced this earlier.
Yes you can.
SVG elements can be manipulated in much the same way as any other HTML/DOM element. For example, with Raphael JS (http://raphaeljs.com/) you could, at the very least, find the absolute position of a vector/SVG element in the browser window, compare that to the absolute position of your header/footer and, using JQuery, trigger an event to change the colour of the SVG.
Raphael additionally renders VML graphics for old versions of IE. So it's well worth looking into.
That said, if you're not planning to use JavaScript, then do it with CSS instead.
Updated with a working example, found here;
http://jsfiddle.net/Zp6HS/4/
Replacing the 'circle' element with your custom path, and the css properties you want to change.
Can't you use the 'parent of' operator in css? Like so:
<style>
header > svg {
fill:blue;
}
body > svg {
fill:black;
}
</style>
Related
I write a website with Vue.js and to handle user interface, I want to use Vue Formulate. All in all it works, but I have trouble to style input errors. So, I tried to make a very simple example to change the background color from the error list, but it doesn't work.
That is my easy component:
<template>
<div>
<p>Test for VueFormulate</p>
<FormulateInput
type="text"
validation="required"
/>
</div>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<style scoped>
li.formulate-input-error {
background-color:green;
}
</style>
After the site is loaded and the error list element is there, I can change the background-color in the Google Chrome devtools. But not bevor.
I hope somebody can explain what I have to do to make it work.
Your style block is scoped meaning you cannot style elements that are not in your immediate <template> (that's the point of scoping). You have three options:
Remove the scoped portion of your <style> block. I don't really recommend this.
Move your general form styles to a global css file. I would recommend this if you use more than 1 input.
Use a deep selector like ::v-deep. This is great for case-by-case overrides, and allows you to select elements that are deeper than your current "scope". Here's an example:
<style scoped>
.formulate-input::v-deep li.formulate-input-error {
background-color: green;
}
</style>
I am using primefaces schedule, i want to change the color of event header which is saved in DB,
scheduleEvent.setStyleClass(".event-consultation .fc-event-skin .fc-event-head");
using this class i want to change the background-color property with the color saved in DB. how can i change color got from db here?
I don't try it, but I guess the following should work:
<style type="text/css">
.yourclass .fc-event-inner{
background-color: #{yourBackBean.backGroundProperty};
}
</style>
....
scheduleEvent.setStyleClass("yourclass");
This way, you specify in-page CSS style that set as color-background the value of a backBean property that you previously loaded from DB.
Of course, you can create an application scope backBean and hardcode the EL in an external CSS file. Your choice.
Hope it helps!
Edit to clarify
You have to put the <style> html node inside <h:head>. I just tested it in a project to change background color of a <p:menuBar> this way:
<h:head>
... some stuff of mine, not relevant
<style type="text/css">
.ui-menubar,.ui-menu-child,.ui-menu {
background: #{sessionBean.bckgColor} !important;
}
</style>
</h:head>
And it works like a charm. I don't know what css style do you have to adapt to custom the event component of <p:schedule>, I am telling you how to write a custom CSS reading values from DB or whatever, using EL.
Maybe you need to use !importan css attribute to override original values as I did.
I'm working with an SVG file that requires the "preserveAspectRatio='true'" on the root element. The SVG is displayed using a standard tag. Currently I'm re-adding the attribute each time I update the SVG file in Illustrator. Is there an easier way to apply this attribute via CSS (or otherwise) so that I don't have to continually re-add the attribute?
<img src="image.svg#preserveAspectRatio=none" /> is the idealistically easy type of implementation I'm hoping for, but my fingers aren't crossed too tight.
The syntax according to the svg spec is:
<img src="image.svg#svgView(preserveAspectRatio(none))" />
I am trying to use a SVG with an embedded bitmap as a navigation element. The idea is to make it more mobile friendly. I already have a PNG fallback in place for IE8 and below.
Somehow the embedded bitmap doesn't show in webkit based browsers. SVG without bitmap embedded show just fine.
I can get the background to show in webkit using the "object" tag but then my links don't work, I can't control the width and I run into a documented bug of safari where image is not scaled and sliders appear.
See the page in question here:
http://www.izbornareforma.rs/izbori-2012/
All images are SVG, the four bottom one have embedded bitmap in them.
There are a number of similar question but none have a workable solution.
Suggestions welcome.
G.D.
This is a bug in Webkit. If you keep your current backgrounds and also load the same SVGs in an object tag you will see that the SVG backgrounds will load correctly with the embedded data. To work around this I would suggest you to create an invisible div where you load your SVGs in object tags, such as...
<div id="svgfix">
<object ... />
<object ... />
<object ... />
<object ... />
</div>
Your CSS:
#svgfix {
width: 0;
height: 0;
position: absolute;
visibility: hidden;
}
The corresponding Webkit bug was fixed and rolled-out with Safari 9.
We have a need to include long title for Sharepoint's (2007) built in webpart. title runs across and users are having to scroll left to right. Is there a way to introduce wrapping to the web part title? I tried few html tag but they are not working.
You should add this little snippet of css that will override the way the space are rendered in the title (and will thus allow proper wrapping) in either your master page, a separate style sheet or one linked with the master page that you are using (do not edit core.css although)
.ms-WPTitle nobr { white-space: normal !important; }
The easiest way is to include it inline within your master page, you'll have versioning for your master page if you want to roll back this change and it won't require to create another style sheet and attach it in the master page or load it as an alternate stylesheet.
In the relevant master page, at the end of the head tag, add this style overriding
<head>
<!-- ootb head content kept above -->
<style type="text/css">
.ms-WPTitle nobr { white-space: normal !important; }
</style>
</head>