Software Archive
Read-only legacy content
Announcements
FPGA community forums and blogs on community.intel.com are migrating to the new Altera Community and are read-only. For urgent support needs during this transition, please visit the FPGA Design Resources page or contact an Altera Authorized Distributor.
17060 Discussions

SVG image not following css rule!

Thomas_V_1
Beginner
‎10-07-2015 09:24 AM
927 Views

Hi, 

I have a really strange bug in Android (works in the emulator) . If I first set an SVG image with java script (el.src = IMAGEHOME;) it follows the sizing of css. 

Then if I reset the same image after having other image in between the image shrinks not following css. 

The strange thing is that if I set it to an exact copy the css is followed. 

Orientation change sets it right.

Is there a workaround? Forcing rendering or maybe dump svg for old style png? I really like svg. 

Any lead is welcome. Thanks!

0 Kudos

Link Copied

5 Replies
Dale_S_Intel
Employee
‎10-07-2015 10:18 AM
927 Views

This could be a difference in webviews.  Does it work in AppPreview or the Debugger?

Can you provide a sample SVG that illustrates the problem?  I'd love to look at it.

Dale (big SVG fan) :-)

0 Kudos
Copy link
Thomas_V_1
Beginner
‎10-08-2015 04:42 AM
927 Views

Hi, 

I made a new project and tried to re produce the bug but it works fine. It works in Test MOBILE and WIFI and in DEBUG. 

In my project all icons have the same problem. 

But for my project after choosing Cordova Hybrid app the debugging in TEST with WIFI does not work (I loss the connection) and the MOBIL do not load at all. Also in DEBUG the server sets buggable=false. 

So I will focus on get the project buggable and then fix this problem. 

 

Here is the working example to get an idea. 

index.html

<!DOCTYPE html>
<html>
<!--
  * Please see the included README.md file for license terms and conditions.
  -->
<head>
    <title>Blank Cordova Mobile App Project Template (Lite)</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="image.css" />
    
    <!-- see http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <style>
        /* following two viewport lines are equivalent to the meta viewport statement above, needed for Windows */
        /* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html and http://dev.w3.org/csswg/css-device-adapt/ */
        @-ms-viewport { width: 100vw ; zoom: 100% ; }  @viewport { width: 100vw ; zoom: 100% ; }
        @-ms-viewport { user-zoom: fixed ; }           @viewport { user-zoom: fixed ; }
    </style>

    <script src="cordova.js"></script>          <!-- phantom library, needed for Cordova api calls, added during build -->
    <script src="js/app.js"></script>           <!-- recommended location of your JavaScript code relative to other JS files -->
    <script src="xdk/init-dev.js"></script>     <!-- normalizes device and document ready events, see README for details -->
    <script src="http://debug-software.intel.com/target/target-script-min.js#OdSSKz7Rb_184KhiItTkmgwhJLiF6x3QNhPnekzjvGE"></script>

</head>

<body>
    <div id="barContainer">
        <div class="barItem" id="barHomeItem" >
            <img class="barItemImage" id="barHomeImage" />
        </div>
    </div>
</body>
</html>

 

app.js

function onAppReady() {
    if( navigator.splashscreen && navigator.splashscreen.hide ) {   // Cordova API detected
        navigator.splashscreen.hide() ;
    }
}
document.addEventListener("app.Ready", onAppReady, false) ;
document.addEventListener("deviceready", onDeviceReady, false) ;
// document.addEventListener("onload", onAppReady, false) ;

function onDeviceReady() {
    console.log('deviceready and Image Set');
    var el = document.getElementById('barHomeImage');
    el.addEventListener("click", imageClicked, false);
    el.addEventListener("touchstart", imagePressed, false);
    el.addEventListener("touchend", resetImage, false);
    el.addEventListener("touchcancel", resetImage, false);
    el.src = "home.svg"; 
}
    
function imageClicked() {
     console.log('Image Clicked');
}

function imagePressed() {
    console.log('Image Pressed');
     document.getElementById('barHomeImage').src = "home2.svg";
}

function resetImage() {
    console.log('Image Reset');
    document.getElementById('barHomeImage').src = "home.svg"; 
}

 

 

image.css

html { z-index: -1; }

body {
  background: #96c8ff;
  z-index: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  -webkit-animation: androidBugfix infinite 1s;
}

#barContainer {
background-color: #000000;
margin: 0;
padding: 0;
width: 100%;
min-width: 270px;
height: 54px;
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
z-index: 10;
}

.barItem {
position: absolute;
top: 0;
height: 54px;
margin-left: 0;
margin-right: 0;
background-color: #000000;
white-space: nowrap;
}

#barHomeItem {
width: 54px;
left: 0;
}

.barItemImage {
outline: 0;
user-drag: none;
-webkit-user-drag: none;
position: absolute;
top: 0;
left: 0;
height: 44px;
width: 44px;
margin-top: 5px;
margin-left: 5px;
white-space: nowrap;
}

 

 

home.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="60"
   height="60"
   viewBox="0 0 60 60"
   id="svg4141"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="home.svg">
  <defs
     id="defs4143" />
  <sodipodi:namedview
     id="base"
     pagecolor="#000000"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:zoom="8.7833333"
     inkscape:cx="30"
     inkscape:cy="30"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     units="px"
     inkscape:window-width="1366"
     inkscape:window-height="703"
     inkscape:window-x="0"
     inkscape:window-y="41"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata4146">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-992.3622)">
    <path
       class="svgBarIcon"
       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:3.56162524;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="M 29.502962,999.12316 6.2518031,1022.1049 29.502962,999.12316 Z m 0.482799,0 23.251165,22.98174 -23.251165,-22.98174 z m -17.929913,23.46564 0,22.9666 0,-22.9666 z m 35.824841,0 0,22.9666 0,-22.9666 z m -35.798603,22.9925 35.772366,0 -35.772366,0 z"
       id="path4701"
       inkscape:connector-curvature="0" />
  </g>
</svg>

 

 

home2.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="60"
   height="60"
   viewBox="0 0 60.000003 60"
   id="svg4141"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="home2.svg">
  <defs
     id="defs4143" />
  <sodipodi:namedview
     id="base"
     pagecolor="#000000"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:zoom="8.7833333"
     inkscape:cx="11.214421"
     inkscape:cy="30"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     units="px"
     inkscape:window-width="1366"
     inkscape:window-height="703"
     inkscape:window-x="0"
     inkscape:window-y="41"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata4146">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-992.3622)">
    <path
       class="svgBarIcon"
       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#606060;stroke-width:3.56162524;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="M 29.502962,999.12316 6.2518031,1022.1049 29.502962,999.12316 Z m 0.482799,0 23.251165,22.98174 -23.251165,-22.98174 z m -17.929913,23.46564 0,22.9666 0,-22.9666 z m 35.824841,0 0,22.9666 0,-22.9666 z m -35.798603,22.9925 35.772366,0 -35.772366,0 z"
       id="path4701"
       inkscape:connector-curvature="0" />
  </g>
</svg>

 

0 Kudos
Copy link
Thomas_V_1
Beginner
‎10-08-2015 05:58 AM
927 Views

I had Intel XDK Device plugin installed and I got the errors below. I unclicked the plugin and the app got built on the server. I hope this info helps to fix this java problem. 

    [javac] Compiling 16 source files to .../appanalyzer/platforms/android/bin/classes
    [javac] .../appanalyzer/platforms/android/src/com/intel/xdk/device/Device.java:277: error: cannot find symbol
    [javac]         final ViewGroup parent = (ViewGroup)webView.getView().getParent();
    [javac]                                                    ^
    [javac]   symbol:   method getView()
    [javac]   location: variable webView of type CordovaWebView
    [javac] .../appanalyzer/platforms/android/src/com/intel/xdk/device/Device.java:378: error: cannot find symbol
    [javac]         webView.getView().setOnKeyListener(webViewListener);
    [javac]                ^
    [javac]   symbol:   method getView()
    [javac]   location: variable webView of type CordovaWebView
    [javac] Note: Some input files use or override a deprecated API.
    [javac] Note: Recompile with -Xlint:deprecation for details.
    [javac] Note: .../appanalyzer/platforms/android/src/com/intel/xdk/device/Device.java uses unchecked or unsafe operations.
    [javac] Note: Recompile with -Xlint:unchecked for details.
    [javac] 2 errors

BUILD FAILED
.../android-sdk-linux/tools/ant/build.xml:720: The following error occurred while executing this line:
.../android-sdk-linux/tools/ant/build.xml:734: Compile failed; see the compiler error output for details.

Total time: 6 seconds

.../appanalyzer/platforms/android/cordova/node_modules/q/q.js:126
                    throw e;
                          ^
Error code 1 for command: ant with args: release,-f,.../appanalyzer/platforms/android/build.xml

0 Kudos
Copy link
Thomas_V_1
Beginner
‎10-12-2015 07:23 AM
927 Views

I found a workaround. 

I changed the img tag to div. I tried object but could not get it working. 

in html: <div id="myId"  ></div>   // set image inline with:  style="content:url('image/myImage.svg')" 

in javascript: document.getElementById('myId').style.content = 'url('image/myImage.svg');

Now the image renders to the correct size both in crosswalk and the normal build. 

 

0 Kudos
Copy link
Thomas_V_1
Beginner
‎10-12-2015 07:25 AM
927 Views

And for the build error I BUILD FAIL with the throw e I downgraded to CLI 4.2.1. I hope this will be fixed soon. 

0 Kudos
Copy link
Reply

Community support is provided Monday to Friday. Other contact methods are available here.

Intel does not verify all solutions, including but not limited to any file transfers that may appear in this community. Accordingly, Intel disclaims all express and implied warranties, including without limitation, the implied warranties of merchantability, fitness for a particular purpose, and non-infringement, as well as any warranty arising from course of performance, course of dealing, or usage in trade.

For more complete information about compiler optimizations, see our Optimization Notice.