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](https://placehold.it/15/f03c15/000000?text=+) `#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
Related
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;
My application was in VML which allowed me to embed html between VML tags. But VML only supports till IE-8. Now I have converted VML to SVG using vectorconverter. But SVG doesn't allows to embed html tag between the SVG tags. After searching on stack and google I came across for using foreignobject tags, However it also only supports till IE-8. I also tried using switch tag placing above foreignobject tags but it to did not worked. Is there any way where I can embed the html code between SVG tags ie below. Thanks in advance
<html>
<head>
<meta charset="UTF-8">
<title>HTML inside SVG</title>
<style type="text/css"></style></head>
<body>
<svg width="500" height="300" style="border:1px red solid">
<switch>
<foreignobject class="node" x="46" y="22" width="100" height="100">
<div style="border:1px green solid">I'm a div inside a SVG.</div>
</foreignobject>
</switch>
</svg>
<div>Interesting! But you a Foreign Object.</div>
</body>
You can achieve this using CSS only. See the attached jsFiddle. I have left your example in for reference above the html/css implementation.
https://jsfiddle.net/Lwtb9w5s/
<div class="container">
<div class="inner">
<span>I'm a div inside a SVG.</span>
</div>
</div>
.container {
height: 300px;
width: 500px;
border:1px red solid
}
.inner {
border:1px green solid;
position: relative;
top: 22px;
left: 46px;
width: 100px;
}
Your question is a duplicate of: is it possible to append a div inside svg element
You can't append HTML to SVG (technically you can with foreignObject, but it's a rabbit hole). Furthermore, visible elements in SVG can't be nested, so elements such as circle, rect, path and such can't have children elements.
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've been using Polymer for a website redesign. I want to display an image that is bound to an element as a background-image. A fairly simple task, but unfortunately I'm having some issues.
I made a running sample of the code for easy testing: click me.
<polymer-element name="album-card" attributes="image">
<template>
<style>
:host{
display: block;
position: relative;
background-color: #99182c;
width: 200px;
}
.description{
padding: 10px;
color: white;
}
.circular{
width: 200px;
height: 200px;
background: url({{image}}) no-repeat;
background-color:green;
}
</style><link rel="stylesheet" href="default_styles.css">
<paper-shadow z="{{shadowValue}}" animated="true"></paper-shadow>
<div class="album-header" vertical layout>
<paper-ripple class="recenteringTouch" fit></paper-ripple>
<div class="circular">
<!--<img src="{{image}}" />--><!-- this does work -->
</div>
<div class="description">
<content select="h2"></content>
<content select="h4"></content>
</div>
</div>
</template>
<script>
Polymer('album-card');
</script>
</polymer-element>
The issue is in the css styling. For some reason the image doesn't diplay in the following line: background: url({{image}}) no-repeat;. However, when using {{image}} in the body somewhere else (in the <div class="circular">, the image does display.
Replacing the {{image}} inside the styling with the direct link also works.
What am I doing wrong?
This looks like a bug. The {{}} are being interrupted literally instead of being parsed by the template engine. Replacing them with [[]] one time bindings works: http://jsbin.com/yocokire/4/edit
However, you should avoi using data-binding inside of <style> if possible (see https://github.com/Polymer/polymer/issues/270#issuecomment-24683309). There are perforamnce concerns and issues under the polyfill. Instead, use a style attribute on the element and do your binding there: http://jsbin.com/riqizige/1/edit
Using d3.js I want to insert attributes of a specific namespace into SVG elements (embedded in a HTML5 document), more precisely that.
So I have the following JavaScript:
d3.select("body")
.append("svg")
.attr({width: 100, height: 100})
.append("rect")
.attr({width: 100, height: 100})
.attr("myns:foo", "bar");
CSS:
rect[foo] {
fill: red;
}
rect[myns\:foo] {
fill: green;
}
Results in:
<html>
<head>…</head>
<body>
<svg width="100" height="100">
<rect width="100" height="100" foo="bar"></rect>
</svg>
</body>
</html>
see JSFiddle
I expected the generated rectangle to be green, but instead it is red. Also I wonder why the attribute is not myns:foo.
I also experimented with d3.ns.prefix (until I read that) and the CSS3 #namespace, however without success.
So can you explain to me why the code above does not work as intended and could you provide an alternative?