I have an SVG file, which I would like to view in Internet Explorer.
IE uses VML for vector-files, but I can't find ANY kind of converter between those two formats anywhere! (not in Inkscape, Illustrator, OpenOffice Draw.....how is this possible !)
I took a look at Raphael, but Raphael can't read existing files.
I found http://vectorconverter.sourceforge.net/index.html
but I can't understand how to use it... any help ?
Try this - SVG path to VML Path. It basically transforms SVG path into VML path that can be used in v:shape.However you still have to transform SVG's path into v:shape manually. The vector converter that you have tried is web based and uses XSLT templates to do the transformation, while the library that i'm suggesting can do it with pure javascript and single line of code. Hope this helps.
You can try this online converter : http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE.php
You can choose between shapes converted as JSON which are managed by Raphael. Or an inline and faster wrapping with Raphael.
I personally prefer the JSON method. You can put the content on an external file and ajax drawings at will. You will next draw the shapes with either of the following methods :
Raphael(json); //create a new paper with the shapes
Or if you want to draw on an existing paper :
function drawJson(items, paper) {
var set = paper.set(),
l = items.length;
for (i = 0; i < l; i++) {
set.push(paper[items[i].type]().attr(items[i]));
}
return set;
}
You can put the last function in a Raphael plugin.
Note : You can save some kb by removing some spaces inside the converted paths. For example with ant :
<replaceregexp match="\s?([CML])\s?" replace="\1" flags="g" file="drawings.json"/>
LibreOffice can read VML imported from a Word doc. You can also download and tweak the SVG=>VML XSLT and test it in IE like this:
<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet type="text/xsl" media="application/xml" charset="UTF-8" href="svg2vml.xml"?>
<svg>
<rect x="25" y="25" width="150" height="200" style="stroke:#AABBFF; stroke-width:1; fill:#AABBFF"/>
<ellipse cx="100" cy="120" rx="50" ry="75" style="stroke:#FF0000; stroke-width:4; fill:#AABBFF"/>
</svg>
Related
I have an svg in a file that represents a workflow - ie a bunch of boxes with lines between them - so say I have four rectangles.
In the app I have a mode - and I want appropriate rectangle to highlight based on the mode. So I want to do a css like:
#workflow rect {background-color:white}
.mode_1 #workflow rect:nth-child(1) {fill:red}
.mode_2 #workflow rect:nth-child(2) {fill:orange}
.mode_3 #workflow rect:nth-child(2) {fill:yellow}
// etc
And it works fine if I have inline svg. However, the workflow diagram is moderately complicated and long. I need to be able to store and edit it in a separate file so I can use an svg editor etc - and I can't find any way of styling it from the parent page. I've tried:
<img src="workflow.svg"/>
the browser doesn't see it as pieces at all
<object data="workflow.svg"/>
it's like an iframe, and it doesn't respond to the page's css
<svg>
<use xlink:href="workflow.svg#diagram">
</svg>
the svg appears as some sort of "shadow object" - and still doesn't respond to css.
I'm on the same domain - so cross site issues shouldn't be a problem.
I can get the effect I want by using javascript, or using multiple svg files - but is there any way to do it with just css and svg?
You'll have use different svg images. As far as I can tell, you can't use css to adjust it. You would have to edit the file itself.
not really what I was looking for, but I thought of a javascript hack to get me there... its ugly but it works - here's a simple example:
<body>
<svg_embed href="workflow.svg"/>
</body>
<script>
$("svg_embed").each( (index, element) =>
fetch( $(element).attr( "href" ) )
.then( response => response.text())
.then( xml => { $(element).html( xml )}))
</script>
so this reads and embeds the svg - thus making it fully css-able.
Is it possible to use SVG Defs outside of the SVG Tag. Something like this:
<defs>
// defs code goes here
</defs>
<svg>
// svg code goes here
</svg>
If so -- how can I associate the defs tag with the particular svg tag that I want to target?
YES
At least outside THAT svg element, which, i think, is what you're going after?!
IT ONLY NEEDS TO BE INSIDE any SVG TAGS
but those don't have to be more than <svg style="display:none;"><defs>...</defs></svg>
(It doesn't matter if it's defined afterwards or before and can even be written outside the body (although i'm not sure that'd be valid html).)
For a while I thought there was something wrong with my code, but it looks like there is an issue with the svg files on libre maps.
I've been trying to use their svg files with jvectormaps but they wouldn't work no matter what. Then I tried to use object and the img tag to just embed them, and they still won't work so obviously there's something wrong with these svg files. I tried a few things such as removing the xml tag, and updating the doctype, but still no luck.
This is one of the files I'm having an issue with.
http://libremap.org/data/boundary/2000/sub_county/svg/cs42_d00.svg
Yes. There is a problem with their SVGs. The root <svg> element should have an xmlns attribute, but it doesn't.
Eg. the map you linked to starts with:
<svg width="100%" height="100%" preserveAspectRatio="xMidYMax"
viewBox="2.682664 439.717923 49.914144 29.355176">
it should be:
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" preserveAspectRatio="xMidYMax"
viewBox="2.682664 439.717923 49.914144 29.355176">
Standalone SVGs must have the namespace attribute. You should probably report it as a bug to them.
In the meantime, you can download the SVG and correct it yourself. Then use your local copy.
Update
There is another issue with the SVG. It has fill set to none and stroke-width set to 0 (see line 8). So nothing will display by default. If you change either of those (see line 8), it will display.
<g id="Unknown_Area_Type_cs42_d00_e00" style="fill:grey;stroke:rgb(255,0,0);
stroke-width:0.01;stroke-linecap:round">
Perhaps it was intended that you use CSS to style the map. Having something like the following should also work:
g#Unknown_Area_Type_cs42_d00_e00 *
{
fill: grey;
stroke:rgb(255,0,0);
stroke-width:0.01;
}
<g:Image ui:field="myImage" url="/images/icon/close.png" />
This code work fine, but the following will not work
.myCss { background: url(/images/icon/close.png);}
I asked this question cos of this issue. Let image u need to use close icon in 10 Presenters. When user mouses over this icon it will call closeHover.png. So if we set url in TestView.java, then we have to do that for another 10 Views. But if we set Url at Css, we don't need to code 10 times?
Can we set Url for g:Image in Css rather than in View.java in Gwt UiBinder?
In short, yes you can. Just give it a regular CSS class, and not a ui:style name so it won't get obfuscated.
But why are you using a <g:Image> for this? Why not a Button or a div (HTML or Label)?
Try using ui:image with #url.
First, move the image to the same package of your uiBinder class instead of using the war/images/icon folder.
Then use the following code:
<ui:image field="myIcon" src="close.png" />
<ui:style>
#url myIconRef myIcon;
.myCss { background: myIconRef;}
</ui:style>
If you want to put the image in another package, no problem. You can reference it using relative path like:
<ui:image field="myIcon" src="../images/icon/close.png" />
I've got this mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:htmlText>
<![CDATA[
link me<b>bold me</b>
]]>
</mx:htmlText>
</mx:Text>
</mx:Application>
(In reality, the html content is coming from an xml file.) I want to give the link a color. So I've got this in my css file:
a { color:#339900; }
But I get a warning: "The CSS type selector 'a' was not processed, because the type was not used in the application."
I also tried:
a:link { color:#339900; }
and the warning changes to: "CSS selector condition type is not supported: ':link'
According to the live docs, it seems like I should be able to do both things. What am I missing?
Also I'm using a font that has no bold, but I want to use the fontThickness property to create one. I've got it working when I apply it to an entire object or class, thus:
.thickenMe { fontThickness: 150; }
I want to apply it to the [b] tag, but I'm getting similar warnings as with the [a].
From what you're describing, it sounds like you're trying to put styles in a stylesheet in your Flex application. That won't work. The stylesheets you're working in are used to style the application, not html content within the application.
If you want to render styled text in a htmlText block, follow the pattern described here:
Flex 3 - Applying cascading style sheets
Use StyleSheet::parseCSS to import custom CSS definition then the styleSheet property of mx:Text to attach it.
var ss : StyleSheet = new StyleSheet;
ss.parseCSS("a{color:#2222ff;} a:hover{text-decoration: underline;}");
tmsg.styleSheet=ss;
tmsg.htmlText="blabla.bla";
You need to apply the css to the content of the htmlText object not the whole application.
There should be a "styleSheet" property or similar on the htmlText object you can set.
You can do like this
some text http://www.orf.at'>http://www.orf.at some text