I want to use a antd context-menu on a d3js-svg, which works totally fine. However, this context-menu has a "closing" delay, that doesn't feel right for this application.
Is there a proper way to remove this closing delay? (I tried different values for transitionName and mouseLeaveDelay without any success)
<Dropdown overlay={this.state.contextMenu.menu} trigger={['contextMenu']}>
<svg height='70vh' width='100%'>
</svg>
</Dropdown>
Thanks in advance!
old (with mouseLeaveDelay={0}):
<Dropdown mouseLeaveDelay={0} overlay={this.state.contextMenu.menu} trigger={['contextMenu']}>
<svg height='70vh' width='100%'>
</svg>
</Dropdown>
Try removing the mouseLeaveDelay={0}it looks like it is an optional parameter and could be the culprit.
Since soemthing like this works:
<Dropdown overlay={menu}>
<a className="ant-dropdown-link" href="#">
Hover me <Icon type="down" />
</a>
</Dropdown>,
I would guess it has something to do with how you created menu or your context menu trigger. Perhaps it is hung up at contextMenu. Try making it as simple as possible following the example and then work your way back to your solution and you will find the culprit.
Use the following css
.ant-dropdown {
animation-duration: 0s !important;
}
Hope, this will help.
I am trying to define a fixed stroke width into my SVG, similar to this thread.
In my devenv (VS 2017) I am running Edge and the project is targeting .net 4.6.1
The SVG is defined as:
<svg version="1.1"
baseProfile="full"
width="100%" height="Auto"
viewBox="0 0 #sheet.SheetShape.Bounds.Width #sheet.SheetShape.Bounds.Height"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" fill="white" />
#foreach (var cut in sheet.SheetCuts)
{
<line vector-effect="non-scaling-stroke" stroke-width="2" stroke="black" stroke-dasharray="5, 5" x1=#cut.Start.X y1=#cut.Start.Y x2=#cut.End.X y2=#cut.End.Y />
}
The vector-effect property is not recognized by VS intellisense and when the code runs nothing special happens.
What should be wrong?
I'm a graphic designer and I work with vector graphic (.svg).
I have a problem with my website and SVG links. Everything work just fine in Chrome (Desktop) and on Android and Windows mobile OS. The problem is just in iOS (Safari, Chrome,...), where I can see the SVG shape but not able to click on it.
<g class="Facebook">
<a href="http://www.facebook.com/Muhedinovic14" target="_blank">
<circle fill="#FFFFFF" cx="576.691" cy="646.241" r="46.112"/>
<path fill="#1B1B1B" d="M576.689,600.129c-25.467,0-46.111,20.646-46.111,46.114c0,25.467,20.645,46.11,46.111,46.11
s46.115-20.644,46.115-46.11C622.805,620.774,602.156,600.129,576.689,600.129z M576.689,690.432
c-24.404,0-44.189-19.786-44.189-44.188c0-24.406,19.785-44.192,44.189-44.192c24.406,0,44.191,19.786,44.191,44.192
C620.881,670.646,601.096,690.432,576.689,690.432z"/>
<path fill="#1B1B1B" d="M576.689,604.386c-23.117,0-41.857,18.74-41.857,41.857c0,23.118,18.74,41.858,41.857,41.858
c0.695,0,1.375-0.072,2.061-0.105v-0.01v-8.912v-21.22h-10.455v-12.109h10.455v-8.93c0-10.362,6.334-16.008,15.582-16.008
c4.424,0,8.23,0.331,9.338,0.478v10.83l-6.408,0.005c-5.029,0-6.008,2.388-6.008,5.895v7.73h11.994l-1.563,12.109h-10.432v21.22
v6.356v0.015c15.926-5.926,27.293-21.214,27.293-39.202C618.547,623.126,599.807,604.386,576.689,604.386z"/>
CSS:
.Facebook:hover path {
fill: #485A96;
Please visit www.vector.ba to see details.
Any kind of help would be great. Thanks!
Safari does not yet support href for links. You need to change the attribute to xlink:href instead.
I am looking into using an image as an SVG fill. I am currently using the following SVG markup:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="logo" x="0px" y="0px" viewBox="0 0 200 25" enable-background="new 0 0 0 0" xml:space="preserve">
<defs>
<pattern id="bg" patternUnits="userSpaceOnUse" width="300" height="25">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..." preserveAspectRatio="xMidYMid slice"></image>
</pattern>
</defs>
<g class="graphic">
<path d="..."></path>
</g>
(I have left some details out ("...") of which I am sure are not relevant to my issue.)
In CSS, I use the following code to append the pattern ID. Pls see below:
.default-header .site-name svg.logo .graphic {
fill:url(#bg);
}
I've already done some digging and found out that this technique (images as SVG background) isn't supported in FireFox and iOS Safari. Therefore I used the following "fall-back" method in CSS:
.default-header .site-name svg.logo .graphic {
fill:#ddd;
}
#supports (-webkit-appearance:none) {
.default-header .site-name svg.logo .graphic {
fill:url(#bg);
}
}
The above code works, EXCEPT for iOS 8/9's Safari. So my issue is mainly that I don't know how to target those non-supporting browsers, which I'm sure there are more of than I am currently testing. SO... I decided to use Modernizr to look for support, but I can't seeem to find an appropriate, representational way of checking if this SVG technique is supported. In other words, on this page: https://modernizr.com/download?setclasses, I can't find the browser feature appropriate for my issue.
I hope somebody knows what direction I could best look into or better yet, has some experience with this technique, which I still think is so awesome (if it works).
Thanks in advance guys!
I found a solution by using a different approach in markup. Instead of using defs and gs, I used the following markup to achieve the same effect:
<svg id="graphic" width="300" height="40">
<!-- Graphic: Styling (inline as FF fix) -->
<style> svg image { clip-path:url(#clipping); } </style>
<!-- Clip Path -->
<clipPath id="clipping">
<!-- this might as well be any type of path -->
<text id="graphicText" x="0" y="37">My Text</text>
</clipPath>
<!-- Image -->
<image id="graphicImage" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{img_url}" width="300" height="300" x="0" y="-120px"></image>
</svg>
I used CSS styling for the text itself.
Hope this helps someone!
I have a JSF 2 application which creates some SVG content. How can i embed it in the output HTML?
The generated SVG looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-opacity:1; color-rendering:auto; color-interpolation:auto; stroke:black; text-rendering:auto; stroke-linecap:square; stroke-miterlimit:10; stroke-opacity:1; shape-rendering:auto; fill:black; stroke-dasharray:none; font-weight:normal; stroke-width:1; font-family:'Dialog'; font-style:normal; stroke-linejoin:miter; font-size:12; stroke-dashoffset:0; image-rendering:auto;" xmlns="http://www.w3.org/2000/svg">
<!--Generated by the Batik Graphics2D SVG Generator-->
<defs id="genericDefs"/>
<g/>
</svg>
I want this output directly in the rendered HTML page. I don't want to use the <object> tag, because i want to be able to manipulate the svg content on the client via javascript.
The result should look like this:
<div id="svgcontent">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 50" id="myDIVBG">
<defs>
[...]
</svg>
</div>
The above is correctly displayed in my browser, I just cant get the XML into the HTML without the XML string being escaped.
What I have always done is edit my SVG files with a tool like inkscape and include them at the appropriate spot with a ui:include tag. Like this:
<ui:include src="images/somedrawing.svg" />
The included file starts with an xml tag followed by an svg tag and the rest of the drawing. The size of the block on the page will be drawn according to the viewPort attributes of the svg tag.
This only works with HTML 5, so make sure your file starts with
<!DOCTYPE html>
I've never used JSF, but searching for "JSF disable escaping" turned up this:
<h:outputText value="???" escape="false" />