I'm working on a wordpress plugin and I'd like to put a custom icon in the main wordpress admin menu.
I've seen other plugins do this, the icons are grey. When you mouse over the item in the menu, the text and icon turn blue. If you are on that plugin's page, the text and icon are white.
I've created a custom icon as an svg (I'm new at svg though). I've set the fill to black, as I read about doing (somewhere on the internet), and added the menu icon like:
function admin_menu() {
add_menu_page('MyPlugin Plugin admin', 'MyPlugin', 'manage_options', 'MyPlugin-plugin', null, 'data:image/svg+xml;base64, ' . base64_encode(file_get_contents(RPP_PLUGIN_DIR . 'assets/image/dashicon.svg')));
add_submenu_page('MyPlugin-plugin', 'MyPlugin Plugin Settings', 'Settings', 'manage_options', 'MyPlugin-plugin', [$this, 'page_settings']);
add_submenu_page('MyPlugin-plugin', 'MyPlugin Plugin Guide', 'Guide', 'manage_options', 'MyPlugin-plugin-guide', [$this, 'page_guide']);
}
The icon appears in the admin menu as black, and doesn't change color when hovered nor selected.
I don't know if I have the code wrong, or if I need something other than a black shape in the svg file.
I haven't been able to find any documentation on how this works or what is required - can you help with an explanation and solution? What do I not understand? :)
Thanks,
Chris
edited - based on the link provided by O. Jones in the comments below, I tried simplifying the svg file, by simplifying in inkscape and then minimizing and removing everything that I could while keeping the svg working.
The icon still only displays in black though, wordpress is not doing the grey/blue/white overlay.
Here's the svg:
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path fill="black" d="M7.701 10.271l3.667-3.178c.405.617 1.366 1.274 1.417 1.866l-3.552 3.078-1.531-1.767zm.497 1.818l5.218-1.019c.092.622.711 1.556.485 1.991l-5.074.991-.629-1.963zm3.781-6.913l.875-3.294 1.578.424-.875 3.294-1.578-.424zm-6.55 6.267l1.167-5.11c.596.316 1.676.364 1.956.855l-1.13 4.951-1.992-.695zM3.353 7.026l.814-3.693c.518.283 1.896.013 1.741.73L5.17 7.41l-1.817-.384zm8.679 7.76l3.868 1.298c-.276.505-.298 1.52-.73 1.713l-3.728-1.251.591-1.76zM4.978 13.9l5.089 1.121c-.268.726-.218 1.949-.675 2.38l-4.945-1.089.531-2.411zm-3.208-.732l2.021-4.176c.589.389 1.732.58 1.989 1.087l-1.956 4.043-2.053-.954zm-.279 1.178l4.929-1.911c.189.782.933 1.81.767 2.435l-4.775 1.852-.921-2.376zm13.086-6.181h4.294v2.07h-4.294v-2.07z"/>
</svg>
I still don't understand what the:
"Then you will have to hardcode each style into the path, rather than using the tag. For each path, work out which classes apply to the path from the tag, and add the CSS from those classes into the path."
from the instructions on that link means, maybe that still needs to be done?
I want to create some links and hover effects inside a svg image. So, I created some custom transparent areas inside one svg image, in an online images editor, in order to do that. But when I try to apply some links in those custom areas, as show below, it does not work. How can I make it work?
<body>
<svg>
<defs></defs>
<!-- custom ellipse which the link does not work -->
<a href="some-link.com">
<ellipse />
</a>
<!-- normal path from the svg image, which the link work -->
<a href="some-link.com">
<path></path>
</a>
<!--rest of the image with many paths-->
<path></path>
</svg>
</body>
The ellipse element seems to be invalid. And since the markup has an error, it might affect even the functionality of the parent element.
The self-closing tag should have the slash at the end (since SVG is based on more strict XML) like below:
<ellipse />
Does this change solve the problem with the link?
I can't get Swap to work with xlinks.
I tried to create page transitions with Swup. Things work ok with normal <a href="/secondpage.html"> tags, but inside svg I need to use <a xlink:href="/secondpage.html">.
From Swup documentation I found that xlinks should work as a selectors.
'LINK_SELECTOR: 'a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]'
Any ideas on how to get Swup to work with SVG xlinks?
Did you figure this out already? For xlink in svg files use:
svg a[*|href]
So:
linkSelector: 'a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), asvg a[*|href]'
Credit goes to daun on the Swup github.
How to make them in HTML or CSS?
For example:
http://draw.to/D11KGJr
I've heard about the map tag, but it seems it only generates an invisible clickable area, on which you can't apply CSS properties, like border or background.
If you are talking about that drawing: it's a canvas element.
See here for a tutorial: https://developer.mozilla.org/en-US/docs/Canvas_tutorial
Besides using CSS 3 techniques as the others proposed, you could also embed SVG in your HTML document.
jsFiddle
<!doctype html>
<html>
<!-- <head> ... -->
<body>
Taken from http://commons.wikimedia.org/wiki/File:SVG_example7.svg?uselang=de, thanks to Sarang!
<hr />
<svg xmlns="http://www.w3.org/2000/svg" width="304" height="290">
<path d="M2,111h300 l-242.7,176.3 92.7-285.3 92.7,285.3z" fill="#FB2" stroke="#B00" stroke-width="4" stroke-linejoin="round"/>
</svg>
</body>
</html>
This is possible - within limits, and only on newer browsers - using CSS3 techniques. For an example, see this CSS3 Twitter Fail Whale.
That uses the canvas element.
Spec: http://www.w3.org/TR/2011/WD-html5-20110525/the-canvas-element.html#the-canvas-element
Doc based on one particular browser implementation: https://developer.mozilla.org/en-US/docs/HTML/Canvas
Informal docs: http://diveintohtml5.info/canvas.html and http://www.html5canvastutorials.com/
There are other approaches for non-rectangular elements, which may be more appropriate for what you actually need, if you can say more about your specific requirements.
I have tried to change the images on my site from img to svg, changing img tags to embed and object tags. But, implementing the onclick function, which previously was contained in the img tag, is proving most difficult.
I found onclick had no effect when placed inside the object or embed tag.
So, I made a div exclusively for the svg, and placed onclick in this div tag. But, no effect unless visitor clicks on the edges/padding of the image.
I have read about overlaying a div, but am trying to avoid using absolute positioning, or specifying position at all.
Is there another way to apply onclick to a svg?
Has anyone encountered this problem? Questions and suggestions are welcome.
You can have an onclick event in the svg itself, I do this all the time in my work. make a rect over the space of your svg, (so define it last, remember svg uses the painters model)
rect.btn {
stroke:#fff;
fill:#fff;
fill-opacity:0;
stroke-opacity:0;
}
then as an attribute to the rect add the onclick (this can be done with js or jquery as well).
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g>
<circle ... //your img svg
<rect class="btn" x="0" y="0" width="10" height="10" onclick="alert('click!')" />
</g>
</svg>
</div>
this will work in almost all browsers: http://caniuse.com/svg
If you just use inline svg there is no problem.
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
<circle id="circle1" r="30" cx="34" cy="34" onclick="circle1.style.fill='yellow';"
style="fill: red; stroke: blue; stroke-width: 2"/>
</svg>
This started as a comment on RGB's solution but I could not fit it in so have converted it to an answer. The inspiration for which is entirely RGB's.
RGB's solution worked for me. However, I wished to note a couple of points which may help others arriving at this post (like me) who are not that familiar which SVG and who may very well have generated their SVG file from a graphics package (as I had).
So to apply RGB's solutions I used:
The CSS
<style>
rect.btn {
stroke:#fff;
fill:#fff;
fill-opacity:0;
stroke-opacity:0;
}
</style>
The jquery script
<script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$(".btn").bind("click", function(event){alert("clicked svg")});
});
</script>
The HTML to code the inclusion of your pre-existing SVG file in the group tag inside the SVG code.
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g>
<image x="0" y="0" width="10" height="10"
xlink:href="../_public/_icons/booked.svg" width="10px"/>
<rect class="btn" x="0" y="0" width="10" height="10"/>
</g>
</svg>
</div>
However, in my case I have several SVG icons which I wish to be clickable and incorporating each of these into the SVG tag was starting to become cumbersome.
So as an alternative approach where I could employ Classes I used jquery.svg. This is probably a shameful application of this plugin which can do all sorts of stuff with SVG's. But it worked using the following code:
<script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.svg.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$(".svgload").bind("click", function(event){alert("clicked svg")});
for (var i=0; i < 99; i++) {
$(".svgload:eq(" + i + ")").svg({
onLoad: function(){
var svg = $(".svgload:eq(" + i + ")").svg('get');
svg.load("../_public/_icons/booked.svg", {addTo: true, changeSize: false});
},
settings: {}}
);
}
});
</script>
where HTML
<div class="svgload" style="width: 10px; height: 10px;"></div>
The advantage to my thinking is that I can use the appropriate class where ever the icons are needed and avoid quite a lot of code in the body of the HTML which aids readability. And I only need to incorporate the pre-existing SVG file once.
Edit: Here is a neater version of the script courtesy of Keith Wood: using .svg's load URL setting.
<script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.svg.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$('.svgload').on('click', function() {
alert('clicked svg new');
}).svg({loadURL: '../_public/_icons/booked.svg'});
});
</script>
I got this working accross the latest versions of Firefox, Chrome, Safari and Opera.
It relies on a transparent div before the object that has absolute position and set width and height so it covers the object tag below.
Here it is, I've been a bit lazy and used inline styes:
<div id="toolbar" style="width: 600px; height: 100px; position: absolute; z-index: 1;"></div>
<object data="interface.svg" width="600" height="100" type="image/svg+xml">
</object>
I used the following JavaScript to hook up an event to it:
<script type="text/javascript">
var toolbar = document.getElementById("toolbar");
toolbar.onclick = function (e) {
alert("Hello");
};
</script>
In case you're fine with wrapping the svg in another element (a for example) and putting onclick on the wrapper, svg {pointer-events: none;} CSS will do the trick.
It worked by simply replacing the <embed/> tag with <img/> and deleting the type attribute.
For instance, in my code, instead of:
<embed src=\"./images/info_09c.svg\" type=\"image/svg+xml\" width=\"45\" onClick='afiseaza_indicatie($i, \"$indicatii[$i]\")'>
which does not answer the clicking, I wrote:
<img src=\"./images/info_09c.svg\" height=\"25\" width=\"25\" onClick='afiseaza_indicatie($i, \"$indicatii[$i]\")'>
It works in Internet Explorer and Google Chrome, and I hope that in the other browsers too.
You could use following code:
<style>
.svgwrapper {
position: relative;
}
.svgwrapper {
position: absolute;
z-index: -1;
}
</style>
<div class="svgwrapper" onClick="function();">
<object src="blah" />
</div>
b3ng0 wrote similar code but it does not work. z-index of parent must be auto.
When embedding same-origin SVGs using <object>, you can access the internal contents using objectElement.contentDocument.rootElement. From there, you can easily attach event handlers (e.g. via onclick, addEventListener(), etc.)
For example:
var object = /* get DOM node for <object> */;
var svg = object.contentDocument.rootElement;
svg.addEventListener('click', function() {
console.log('hooray!');
});
Note that this is not possible for cross-origin <object> elements unless you also control the <object> origin server and can set CORS headers there. For cross-origin cases without CORS headers, access to contentDocument is blocked.
Have you looked into using the CSS z-index property to make the container dev be "on top" of the svg? Because the div is (presumably) transparent, you will still see the image exactly as before.
This, I believe, is the best-practice, non-hack, intended way of solving your problem. z-index is only useful for elements that have a position property of fixed, relative, or, as you've heard, absolute. However, you don't actually have to move the object.
For example:
<style>
.svgwrapper {
position: relative;
z-index: 1;
}
</style>
<div class="svgwrapper" onClick="function();">
<object src="blah" />
</div>
For what it's worth, it would also be a little more elegant and safe to not use onClick at all, but instead to bind the click event using javascript. That's another issue altogether, though.
Assuming you don't need cross browser support (which is impossible without a plugin for IE), have you tried using svg as a background image?
Experimental stuff for sure, but thought I would mention it.
Perhaps what you're looking for is the SVG element's pointer-events property, which you can read about at the SVG w3C working group docs.
You can use CSS to set what happens to the SVG element when it is clicked, etc.
Click on SVG's <g> element in <object> with click event. Works 100%. Take a look on the nested javascript in <svg>. Don't forget to insert window.parent.location.href= if you want to redirect the parent page.
https://www.tutorialspoint.com/svg/svg_interactivity.htm
I wrapped the 'svg' tag in 'a' tag and put the onClick event in the 'a' tag
I had a similar issue: it only seems that the onclick event is not occurring, but it is firing twice
the svg tag had an onclick option, like: <svg ... onclick="someJsFunction() ...> it opens a dropdown menu, and had a class option named f.e. class-for-svg
the path (included in the svg tag) had no any class option,
in the other hand, I had a window.onclick function to close the dropdown when the user clicks on the somthing else, here the dropdown was clossing - when the object's class option matched to the svg's class option
so when I clicked on the path portion inside the svg tag - the window.onclick event accurred too, and because of the does not matching(to the class name), the dropdown was clossed imediatelly, and it seems that the onclick event is not happening )
in reality it happens twise, one opens, an the second closses the drop down
solution: add the same class option to the path tag too )
enjoy please )