I want to fill my line graph with a gradient, I use this configuration, but with the option styledMode= true it does not work. I am using Hightcharts 9.0
https://jsfiddle.net/yjqcz42n/92/
As you can read in the docs:
When the chart.styledMode option is true, no presentational attributes (like fill, stroke, font styles etc.) are applied to the chart SVG. Instead, the design is applied purely by CSS.
It means you need to style series using their CSS classes.
Recommended solution:
Due to the difficulty of styling gradients for the SVGs, there is a Highcharts guide doc, on how to configure Gradients, shadows, and pattern fills in styled mode
https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns#gradients-shadows-and-pattern-fills-in-styled-mode
Alternative solution:
HTML
<svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
rect{fill:url(#MyGradient)}
</style>
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
</svg>
CSS:
.highcharts-series-0 {
fill: url(#MyGradient);
stroke: url(#MyGradient);
}
Demo:
https://jsfiddle.net/BlackLabel/15rmcfyd/
I do want to display some text inside 3D box image using aframe in ar.js.
Following is the HTML code
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/examples/vendor/aframe/build/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
<!-- <script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script> -->
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='trackingMethod: best;'>
<a-anchor hit-testing-enabled='true'>
<a-box position='0 0.5 0' material='opacity: 0.5;'>
<a-entity text="value: HELLO"></a-entity>
</a-box>
</a-anchor>
<a-camera-static/>
</a-scene>
</body>
</html>
My main task is to project some dynamic text inside the 3D box. But for instance, I am trying to put some static text. But unable to do so. Does anybody know how can I add text inside the box?
actually Your code is working, but both the box, and text are white + the text is really small:
If You enlarge it a bit + make it black, it would be apparent, that it is there:
<a-entity position="1 0 0" scale="3 3 3" text="value: HELLO;color:black"></a-entity>
in our app we use the TWebBrowser component of Delphi to display web content. Now we have a problem if windows has scaled monitors, for example 125% scale. In this case some HTML-controls aren't rendert correctly, because the window.devicePixelRatio property in JavaScript isn't updated but stays on 1, althougt it should be 1.25 on a 125% scaled monitor.
Is there any posibillity to fix this issue? From inside JavaScript it is not possible to changes this value, but maybe from the Delphi side?
Edit: I tried out an embedded chromium and there it works fine. But currently it is not possible to move from ie to chromium.
A sample HTML:
<!DOCTYPE html>
<html>
<body>
<div style="width: 100px; height: 25px; border: 1px solid black; border-radius: 4px; overflow: hidden">
<span style="font-size:10pt; white-space: pre">Long sample text</span>
</div>
</body>
</html>
In Embedded IE the text ist cut of
Even though it is obsolete, you will find that enabling FEATURE_96DPI_PIXEL for your application will return the correct pixelratio:
HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER)
SOFTWARE
Microsoft
Internet Explorer
Main
FeatureControl
FEATURE_96DPI_PIXEL
yourapplication.exe = (DWORD) 00000001
The recommended way is to enable the DOCHOSTUIFLAG_DPI_AWARE flag.
I'm using an svg with custom fonts from google, but i'm hosting it myself. Here's the SVG file with the following code:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="430" height="590">
<defs>
<style type="text/css"><![CDATA[
#font-face {
font-family: 'Fjalla';
src: url('http://build-podcast.com/fonts/fjalla.eot');
src: url('http://build-podcast.com/fonts/fjalla.eot?#iefix') format('embedded-opentype'),
url('http://build-podcast.com/fonts/fjalla.woff') format('woff'),
url('http://build-podcast.com/fonts/fjalla.ttf') format('truetype'),
url('http://build-podcast.com/fonts/fjalla.svg#fjalla') format('svg');
font-weight: normal;
font-style: normal;
}
text { font-family: Fjalla, sans-serif; font-weight: bold; fill: #4b5568; }
]]>
</style>
</defs>
<g id="logo">
<text x="135" y="60" font-size="210" transform="rotate(45)">/</text>
<text x="115" y="363" font-size="210" transform="rotate(-45)">\</text>
<text x="15" y="341" font-size="200">build</text>
<text x="15" y="475" font-size="127">podcast</text>
<text x="21" y="540" font-size="36">screencasts on tech tools</text>
</g>
</svg>
I'm using the img tag to display it on the main website
<img src="logo.svg">
It is displaying fine on desktop browsers and even on mobile browsers like Android Chrome. But it is not displaying at all in iOS 7 Chrome or Android. Any clue to how I can amend the SVG file code for the part on the custom fonts? Thanks!
I got fed up with trying to make the fonts to properly work in my SVG across all devices/browsers, so with my work around it helped that I have access to the original .ai file (.eps is fine).
My steps included:
- Open the original vector file in Adobe Illustrator.
- Select your text layers. Hold shift when selecting more than one. I find it easier do select multi layers through the Layers panel, which you can find in Menu under Window.
- Then, go to menu option Type and select Create Outlines.
This way we do not have to rely on calling fonts because your text is now just a vector shape. Now all that is left is to save your SVG:
- Select all your vectors.
- Go to menu option Object and select Artboards > Fit to Selected Art.
- Now go to File and select Export Selection....
- A Export for Screens dialog should pop up. On left side above .your Asset(s), click on the Artboards tab above
- On the right side, choose where you want to save.
- IMPORTANT STEP: select your format as *SVG.
- Lastly, click Export Artboard at bottom right.
That's all there is too it, and everything will appear exactly as it should across all devices and browsers!
We recently had the same problem having custom fonts displaying in SVG images. Before implementing this fix, the text would not show up in iOS on certain devices. After A LOT of debugging and trying different ways to solve it, we ended up with a CSS Font Fallback solution. This was the only way for us to solve the same problem as you describe.
Here is how we implemented it:
First we extracted the shapes of the characters using Adobe Illustrator like this:
<font horiz-adv-x="2048">
<font-face font-family="RobotoCondensed-Light" units-per-em="2048" underline-position="-150" underline-thickness="100"/>
<missing-glyph horiz-adv-x="434"/>
<glyph unicode=" " horiz-adv-x="434"/>
<glyph unicode=""" horiz-adv-x="549" d="M217,1341l-36,-261l-68,0l2,254l0,226l102,0M442,1341l-36,-261l-68,0l2,258l0,222l102,0z"/>
<glyph unicode="," horiz-adv-x="346" d="M246,19l-100,-277l-77,0l56,280l0,168l121,0z"/>
<glyph unicode="-" horiz-adv-x="497" d="M445,568l-399,0l0,104l399,0z"/>
<glyph unicode="." horiz-adv-x="440" d="M276,0l-130,0l0,166l130,0z"/>
<glyph unicode="0" horiz-adv-x="978" d="M867,564C867,376 834,232 767,131C700,30 607,-21 490,-21C372,-21 279,30 212,131C144,232 110,377 110,564l0,326C110,1077 144,1221 211,1324C278,1426 370,1477 488,1477C606,1477 699,1426 766,1324C833,1222 867,1077 867,890M747,911C747,1059 725,1173 681,1252C636,1331 572,1371 488,1371C405,1371 341,1331 297,1252C253,1172 231,1058 231,911l0,-366C231,398 253,285 298,204C343,123 407,83 490,83C573,83 637,123 681,204C725,284 747,398 747,545z"/>
<!-- ...... Complete characterset ...... -->
</font>
Then we defined the font using CSS:
<defs>
<style type="text/css">
<![CDATA[
#font-face {
font-family: 'RobotoCondensed-Light-Fallback';
font-style: normal;
font-weight: 300;
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRg............7yEuAS1Fmtsgn2C3mGC7pcSzGaItVzpDHKXKRoB2nd8b5m1ni67q0DVvtWpxe61sF59tcm+qiK+1YY21P2oWNdkPaA1Nv0meNl0KL0HwqtAmtRKFDaA9/APTVpT1K/YclSp7tiAGxtzbsEoOZYV9u9g8VM0kokz6M/klEI+HecECMVpoFhuIDsL5bmwAAAVSQKFMAAA==) format('woff');
}
]]>
</style>
</defs>
The magic happened once we named the font "RobotoCondensed-Light-Fallback" and then:
<text style="font-family:RobotoCondensed-Light,RobotoCondensed-Light-Fallback,Arial,sans-serif; font-weight: 300" font-size="36">Text</text>
What happens is that iOS uses <font-face> while all other browsers use the fallback font.
Hope this helps!
For your info, we used this definition in the SVG.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="270px" height="303px" viewBox="0 0 270 303" enable-background="new 0 0 270 303" preserveAspectRatio="xMidYMid meet" xml:space="preserve">
FWIW, it's likely that a Tiny PNG-optimised PNG at double-resolution will be waaay smaller than a text-heavy SVG with text converted to curves.
I was getting around 400k for an outlined SVG with about 50 labels of 2 - 6 words, but exported to PNG, ran it through Tiny PNG and got 70k.
So if you just need something for retina screens, consider the PNG route:
https://tinypng.com/
https://www.npmjs.com/package/tinypng-cli
I have two absolutely positioned adjacent elements that share the same background color. They appear to be one single element on my desktop and laptop, but there's a plainly visible "border" of sorts - a sliver of translucent color - between the two elements when viewed on the iPad.
If I had to guess I'd say it's due to the different method by which vector objects are drawn in the browser in iOS, but that's just a guess based on some vague information I heard in a talk once.
Here's an entire sample page that can show the issue if you can run it on an iPad:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<style type="text/css">
#container {
position: relative;
width: 200px;
height: 40px;
background-color: transparent;
}
#left {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 40px;
background-color: red;
}
#right {
position: absolute;
top: 0;
left: 50px;
width: 150px;
height: 40px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
The problem only occurs if Safari is scaling the page.
Safari scales elements individually, often resulting in each element having a 1-pixel-wide translucent edge on one or more sides. Then when the scaled elements are placed side by side, the overlapping translucent edges are still not 100% opaque, so some of the background leaks through.
The problem isn't limited to absolutely-positioned elements; it applies to all adjacent elements (except images, it seems).
For instance, if a table is styled with td { background-color:black } there will sometimes be subpixel slivers of background showing between the table cells. Even two adjacent spans exhibit the problem.
My solution is to restructure the page so that adjacent elements of the same color are wrapped in a container, and the background is applied to the container. This is a lot of work. In your case, a quick fix would be to overlap the divs by 1 pixel.
I do consider this to be an iPad bug. None of my Windows browsers (including Safari) have this problem when zooming a page.