This is my first bug so be gentle. I just can't get a custom url cursor to work. When using a standard one like "pointer" everything works, but when using a url, either local or remote it just does nothing.
I've come across similar issues being solved here but none of them are working for me (checking the sizing, file type, url location...)
My goal was for it to appear when hovering an svg image. I've tried styling it inside the svg file itself, it works fine for "pointer" but not for "url".
I've tried adding the svg file inside an tag, and styling the cursor inside it, works with "pointer", doesn't work with "url".
Tested on different browsers, none of them respond to it.
What am I doing wrong? See below some of the stuff I've tried:
<svg ...>
<style>
svg {cursor: url(01ssss3326.cur);}
</style>
</svg>
doesn't work
<svg ...>
<style>
svg {cursor: url(http://www.rw-designer.com/cursor-extern.php?id=107471);}
</style>
</svg>
doesn't work
<body>
<img src="prettyinternet.svg" alt="" style="cursor: url(http://www.rw-designer.com/cursor-extern.php?id=109070);">
</body>
doesn't work
<body>
<img src="prettyinternet.svg" alt="" style="cursor: pointer;">
</body>
this works
<svg ...>
<style>
svg {cursor: pointer;}
</style>
</svg>
this works too
Is that working in this way? I guess you are just missing ""
<svg ...>
<style>
svg {cursor: url("01ssss3326.cur");}
</style>
</svg>
This is another example which I used in one of my project and it works. I am passing it in my css
cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='38' viewport='0 0 100 100' style='fill:black;font-size:19px;'><text y='50%'>🚀</text></svg>") 16 0,auto;
Related
I am having trouble verifying the name of the .css file that will modifying the readme.md file at the root of Github repo.
I believe it is:
.github/github.css
but that doesn't seem to do anything to the Markdown. Does anyone know if this is incorrect?
You can add some HTML (actually XHTML) and CSS inside a <foreignObject> tag inside of an svg file and then embed that inside of an <img> tag in your GitHub README.
This is a simple animation in CSS that changes the color of the h1 text:
h1 {
color: red;
animation: myanimation 2s infinite;
}
#keyframes myanimation {
from {
color: red;
}
to {
color: yellow;
}
}
<h1>Hello world!</h1>
You can embed the style and HTML into a <foreignObject> tag inside of an svg like so:
example.svg
<svg fill="none" viewBox="0 0 400 400" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml">
<style>
h1 {
color: red;
animation: mymove 2s infinite;
}
#keyframes mymove {
from {
color: red;
}
to {
color: yellow;
}
}
</style>
<h1>HELLO WORLD!</h1>
</div>
</foreignObject>
</svg>
Then, lastly you can embed the svg in your README, using an <img> tag and it should render your HTML with the applied CSS styles:
README.md
# My GitHub README
Welcome to my README!
<div align="center">
<img src="example.svg" width="400" height="400" alt="css-in-readme">
</div>
another example & source
GitHub does not allow for CSS to affect README.md files through CSS for security reasons (as if you could inject CSS into a ReadMe, you could easily launch a phishing attack). This includes both stylesheets referenced through <link rel> and inline styles used with <style>.
The readmes are in markdown syntax, so some styling can be done, such as adding colours through placeholder images, just like here on StackOverflow. For example, you can add red squares with the following:
-  `#f03c15`
You can also make use of things like diff, json, html, js and css to affect text colouring.
Wrap the images in a tag as shown below
<div>
<img src="/images/count.png" width="250" >
<img src="/images/home.png" width="250">
<img src="/images/profile.png" width="250">
</div>
Note: the images folder and the readme are in the root directory of the project
Hi,
Is it possible to achieve this effect with CSS only?
As you can see, the image on top is distorted along with the text inside to look like the one below. It may be a div or an image. I have been researching on transform but found nothing about curves.
This is NOT a duplicate because I am not asking how to curve the text only but the div container as well as in case of an image.
Thank you.
I don't know if you would technically qualify this as "CSS only" since it is using an SVG filter, but I think it could be made to achieve the type of warping you want.
.warped {
display: inline-block;
background-color: yellow;
padding: 4px;
filter: url(#displacement);
}
#filterSource {
display: none;
}
<span class="warped">Warped Text!</span>
<div>
<svg id="filterSource" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="displacement" filterUnits="userSpaceOnUse">
<!-- this is just a base64 encoded PNG with a simple linear gradient -->
<!-- this may not be exactly what you want, but you can adjust the R and B channels to displace the element however you like. -->
<feImage href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAdhAAAHYQGVw7i2AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAGlJREFUaIHtz6ENwEAMxVBfUWn3H7Kw8LpCdMjAT/osIF7AZuAGnsMt4D3cN3kOuIZ3eoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNj9ceBBjuV6HJAAAAABJRU5ErkJggg==" result="dispMap" />
<feDisplacementMap
in="SourceGraphic"
in2="dispMap"
scale="10"
xChannelSelector="B"
yChannelSelector="R" />
</filter>
</defs>
</svg>
</div>
Here's a nice tutorial on some cool effects you can achieve with this technique: https://www.creativebloq.com/how-to/add-svg-filters-with-css
I have the following code:
<body class="active">
<object data="css/svg/circle.svg" type="image/svg+xml">
<p> Your browser doesn't support SVG.</p>
</object>
</body>
The SVG is simple like:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="../style.css" type="text/css"?>
<svg id="circle" height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
The active class on <body> is toggled through javascript. Then I have the following CSS:
#circle {
opacity: 1;
}
.active #circle {
opacity: 0.5;
}
The thing is, if I add the SVG with the <object> tag, the second selector, active #circle, doesn't work. If I put the SVG inline then it works. Note that I am including the CSS on the SVG file as well.
I would like to use the <object> because the real SVG isn't really so simple so my html would get messy. Is there a way to achieve that?
Thanks in advance,
Here is a few ways you might could use
Leave object empty and load it as an inline svg using ajax, on page load, ...
HTML
<object data="" data-svg="path-2-image.svg" type="image/svg+xml">
<p> Your browser doesn't support SVG.</p>
</object>
...or why not into a plain element, like a div
<div data-svg="path-2-image.svg">
</div>
Script (concept)
<script>
// on load/dom ready
var trg = document.querySelector('[data-svg]');
var svgpath = trg.getAttribute('data-svg');
call-your-SVGloader-function(obj,svg);
</script>
Note: I also think you need to use trg.innerHTML = ... for the object as you do with the div
Was also thinking of using an image, though haven't tried if this actually works
<img src="path-2-image.svg" alt="">
I have a HTML 5 file containing a SVG element. Also there are some styles defined in a CSS file (imported in the html file correctly), e.g.:
rect.cell-border {
stroke: #000;
stroke-width:1.3px;
}
One element in the SVG looks like this:
<rect class="cell cell-border" width="256" height="256" style="fill-opacity: 0.5;"></rect>
Problem: Besides the inline CSS properties this rect element does not get the properties by cell-border. I have absolutely no idea why. In general the CSS file works, because other (non SVG but pure HTML) elements are styled correctly.
I generate the SVG elements with D3.
It works in this fiddle: http://jsfiddle.net/j0g8rnqu/1/
This means that your css and the svg are correct. There can only be something wrong with your binding of the css file. If you do it the standard way, it should work. Here is the most simple case:
file test.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="svg-test.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" overflow="visible">
<rect class="cell cell-border" width="256" height="256" style="fill: #79a;"></rect>
</svg>
</body>
</html>
file svg-test.css
rect.cell-border {
stroke: #000;
stroke-width:1.3px;
}
Note that I added overflow="hidden"to the svg to ensure that the border does not get cropped.
Seems to work for me. The first rect has the class and therefore the stroke, the bottom does not.
rect.cell-border {
stroke: #000;
stroke-width:1.3px;
}
<svg height="258" width="258" viewBox="-1 -1 258 258">
<rect class="cell cell-border" width="256" height="256" style="fill-opacity: 0.5;"></rect>
</svg>
<svg height="258" width="258" viewBox="-1 -1 258 258">
<rect width="256" height="256" style="fill-opacity: 0.5;"></rect>
</svg>
Okay the solution that finally worked was to include the external css file in a different way:
<style>
#import url(css/MatrixVisualization.css)
</style>
Rather than the regular way. Another possibility would be to use embedded css declarations.
I was looking at Chris Coier's SVG tricks on CSS-tricks.com and also recently saw him at a conference where he talked about the powers of SVGs and how you can keep all assets in one external svg file.
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="beaker" viewBox="214.7 0 182.6 792">
<!-- <path>s and whatever other shapes in here -->
</symbol>
<symbol id="shape-icon-2" viewBox="0 26 100 48">
<!-- <path>s and whatever other shapes in here -->
</symbol>
</svg>
Then, you could just use it like this:
<svg class="icon">
<use xlink:href="#shape-icon-1" />
</svg>
<svg class="icon">
<use xlink:href="#shape-icon-2" />
</svg>
Sounds great! BUT, I want to be able to access individual nodes in each symbol and altering them with CSS like I normally would if the SVG was inline in the HTMl.
Take a look at this CodePen:
http://codepen.io/chriscoyier/pen/Hwcxp
I thought I could do this, but I can't get it to work:
.icon path{
fill: green;
}
This does, but this alters the actual source svg
#beaker path {
fill: green;
}
What I want to do is reuse a graphical element in a grid. And on hover, alter a node in the svg. But only on the node in that particular parent. Not all of them.
Firefox does some unknown thing where you can style it this way.
edit:
To be more precise:
Firefox seems to turn that symbol kinda into in the DOM.
http://codepen.io/Type-Style/pen/EaGbam
.hoverME:hover path, .hoverME:hover circle {
fill: red;
}
This also works with an external file. (Unfortunatly it does not with crossDomain Files)
"But you can insert just the class name of the path. That will work."
I mean as long as you stay within the SVG with your selectors it will work.
circle:hover, path:hover {
fill: red;
}