The following issue happens in Firefox 20.0.1 and IE10, but works in Chrome.
When I test a highchart plot in Firefox 20.0.1 or IE10, the chart series is invisible. After looking into the chart html, I found the clipPath in the SVG is not set correctly.
There are 4 "clipPath" defined in the "defs" section, as follows:
`
<defs>
<clipPath id="highcharts-1">
<rect height="110" width="9999" y="0" x="0" fill="none" ry="0" rx="0"></rect>
</clipPath>
<clipPath id="highcharts-2">
<rect height="0" width="1228" y="0" x="0" fill="none"></rect>
</clipPath>
<clipPath id="highcharts-14">
<rect height="0" width="0" y="0" x="0" fill="none"></rect>
</clipPath>
<clipPath id="highcharts-15">
<rect height="110" width="99" y="-40" x="-99" fill="none" ry="0" rx="0"></rect>
</clipPath>
</defs>
`
In the "highcharts-series" "g" tag, it uses "clip-path="url(#highcharts-14)"". Which causes the chart series invisible. If I manually change the clip-path to url(#highcharts-2), chart shows up.
Since I didn't set any clipPath related options in the highchart, why the "highcharts-14" and "highcharts-15" get defined and used? How to fix this issue?
Thanks,
Related
Hi everybody I'm developing a CRUD system for a back-end webapp, I've installed tinymce and in the edit page I put the script for it.
<script type="text/javascript">
// Initialize your tinyMCE Editor with your preferred options
tinymce.init({
selector: 'textarea',
height: 200,
theme: 'modern',
plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help',
toolbar1: 'formatselect | bold underline italic strikethrough | backcolor forecolor | fontselect | fontsizeselect | alignleft aligncenter alignright alignjustify | table ',
toolbar2: 'numlist bullist | outdent indent | removeformat | subscript superscript | link unlink',
fontsize_formats: '7px 8px 9px 10px 11px 12px 13px 14px 15px 16px 17px 18px 19px 20px 21px 22px 23px 24px 25px 26px 27px 28px 29px 30px',
image_advtab: true
});
</script>
The problem is in the table plug-in, when I select cellspace and cellpadding from the editor it works, and seems save it correctly, but when I go in the view page of that element the table don't have that attributes. when I go in the developer tools in chrome I see:
th, td {
padding: 0
}
And if I disable that the table goes in the right dimension...
Anyone can tell me what is the problem??
If it looks correct in TinyMCE but not when rendered outside the editor its likely the CSS of your page is causing that change. This appears to be the case based on what you state about the th and td padding in the dev tools.
I'd like to convert this SVG to PDF with the size scaled up to x10 of it's current size without losing the quality of the picture. The PDF should also be in 300 PPI. How can I achieve kind of output?
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="248.1" height="350.7" viewBox="0 0 248.1 350.7" xml:space="preserve">
<desc>Created with Fabric.js 1.7.19</desc>
<defs>
</defs>
<g transform="translate(51.2 34.1) scale(0.1 0.1)">
<image xlink:href="./cat.jpg" x="-512" y="-341" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="1024" height="682" preserveAspectRatio="none"></image>
</g>
</svg>
This SVG came from fabricjs toSVG() code. I can resize it using fabricjs, but I'd like to know is it possible to do this and how using ImageMagick.
ImageMagick is a programm suite aimed at raster images. What you have is a format that mixes vector and raster content both for input and output.
ImageMagick can handle that, but only through additional programs that need to be installed:
import from SVG with Inkscape or librsvg
export to PDF with ghostscript
You can cutout the middleman. Inkscape, while being mainly a SVG editor GUI, also has a commandline mode, for example for export tasks. You can scale the SVG by multiplying the height and width values on the root element with your scale - do not change the viewBox attribute:
<svg width="2481" height="3507" viewBox="0 0 248.1 350.7" ...>
Or, if you know the target size of the pages you want, you can set them. Even if aspect ratio does not fit, your content will sized-to-fit on the page. For example with a A4 page:
<svg width="210mm" height="297mm" viewBox="0 0 248.1 350.7" ...>
Then execute Inkscape:
inkscape --without-gui --export-pdf=out.pdf in.svg
Pictures are embeded as-is, so you do not loose resolution.
I've been experimenting with SVG filters, but can't figure out how to fix this: I have an SVG that uses filter effects like feBlend:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="70 0 360 360">
<defs>
<path id="orange" d="M200,50 a35 35 0 0 1 100 0 l0 70 a40 40 0 0 1 -100 0 z" fill="rgb(252,170,30)"></path>
<path id="yellow" transform="rotate(45 250 185)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(242,229,0)">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 250 180" to="45 250 180" dur="1.5s" additive="replace" fill="freeze"/>
</path>
…
<filter id="blendit">
<feImage xlink:href="#orange" x="0" y="0" result="1"/>
<feImage xlink:href="#yellow" x="0" y="0" result="2"/>
…
<feBlend mode="multiply" in="1" in2="2" result="12"/>
<feBlend mode="multiply" in="12" in2="3" result="123"/>
…
</filter>
</defs>
<rect x="0" y="0" width="500" height="500" filter="url(#blendit)"/>
</svg>
When included on the page as inline SVG, the graphic displays sharp on an iOS retina screen.
However, if I try to use it as a source for an <img> tag:
<img src='svg-with-filters.svg'/>
The graphic appears fuzzy, as if it was an #1x resource on the retina screen.
How do I force the graphic to appear sharp on iOS, without resorting to inline SVG or an <object> tag? It renders correctly on desktop Chrome and on Android devices.
Example
Here's a CodePen that demonstrates the problem, and a screenshot below.
i want to know the position of the chart when i move the scrollbar in the highchart . is there any scrollbar event associated in highchart .Please help .
The Highcharts API does not show any event handling options for the scrollbar.
Let's take a look at the code in their example. Here is the SVG that renders the scrollbar itself.
<g class="highcharts-scrollbar" transform="translate(10,372)">
<rect x="0" y="-0.5" fill="white" stroke="silver" stroke-width="1"
rx="7" ry="7" height="14" width="580"></rect>
<rect y="0" height="14" fill="gray" rx="7" ry="7" x="358"
width="18"></rect>
<path fill="none" stroke="yellow" stroke-width="1"
visibility="visible"
d="M 363.5 3.5 L 363.5 9.333333333333334 M 366.5 3.5 L 366.5 9.333333333333334 M 369.5 3.5 L 369.5 9.333333333333334"></path>
<g>
<rect x="-1" y="-1" width="15" height="15" strokeWidth="0" rx="7" ry="7" fill="gray"></rect>
<path fill="yellow" d="M 8 4 L 8 10 5 7"></path>
</g>
<g transform="translate(566,0)">
<rect x="-1" y="-1" width="15" height="15" strokeWidth="0" rx="7" ry="7" fill="gray"></rect>
<path fill="yellow" d="M 6 4 L 6 10 9 7"></path>
</g>
</g>
The scrollbar position is the 2nd <rect> tag. You can use jQuery to retrieve the value of attribute x. In the example code, the position of x = 358 out of the maximum 580 space (the '' with which filling).
I want to create a half transparent image with a empty rectangle at the middle like below:
How do I achieve this? Thanks
The easiest and more flexible way (it will allow you to use percentage or fix position and size) might just be to use 4 rectangle like this:
<Grid Opacity="0.5">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="150"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="Black" Grid.ColumnSpan="3"/>
<Rectangle Fill="Black" Grid.Row="1"/>
<Rectangle Fill="Black" Grid.Row="2" Grid.ColumnSpan="3"/>
<Rectangle Fill="Black" Grid.Row="1" Grid.Column="2"/>
</Grid>
or you could use a Path Geometry:
<Path StrokeThickness="0" Fill="Black" Opacity=".5" >
<Path.Data>
<GeometryGroup FillRule="EvenOdd">
<RectangleGeometry Rect="50,50,100,100" />
<RectangleGeometry Rect="0,0,300,200" />
</GeometryGroup>
</Path.Data>
</Path>