Saxon » Saxon-CE

Hi,

A wrap-content method might be useful, but I can see potential problems with this, in terms of what outer elements are are allowed and not allowed to be replaced. Please may you explain what you are trying to do? Maybe if we understand the problem, we can see why a @replace-content@ or @append-content@ method cannot work or suggest a work-around.

OK, well the exact issue is this... I have the following inline svg in the source HTML document.

<div id="svg">
    <svg>
        <g class="row">
            <rect x="0" y="0" fill="red" width="50" height="50"/>
        </g>
        <g class="row">
            <rect x="0" y="0" fill="red" width="50" height="50"/>
            <polygon fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="66.887,75 60.084,69.304 51.436,71.562 54.866,63.467 
            	50,56.112 58.922,56.804 64.564,50 66.648,58.523 75,61.674 67.366,66.249 "/>	          
    	</g>
        <g class="row">
            <rect x="10" y="0" fill="blue" width="50" height="50"/>
        </g>
    ...

I am running a transform on all elements inside each row to change their y value. However some SVG elements have no y value, so I am trying to generate a <g transform(...) on those elements, in this case its the <polygon...

So, the end result I am looking for is:

I have a temporary solution. I group any element that has no Y attribute. Then <xsl:result-document href="?select=.." method="ixsl:replace-content"> works fine. The limitation here is that I am copying and pasting many SVG code snippets generated by illustrator. So creating groups either in illustrator or in code for all elements that have no Y attribute will be time consuming and prone to error.

You could handle the manipulation of the svg in the XSL and then call @<xsl:result-document href="#svg" method="replace-content">...@ which would display the end result.

You could get the fragment using a function. Something like this would work:

Note sure on the scale of your application or how the svg update is triggered, but the function could be called via some event handled in a template rule.

I hope this helps?

I have never used xls:function so need a bit more guidance (even though I read up on it).

1. Are you saying that the SVG should live in the XSL document or the datasource instead of the HTML page?
2. I need to trigger the event on loading the page. Is this possible?
3. Can you provide more code to illustrate how it would integrate into my code.

Lincoln Mitchell wrote:

I have never used xls:function so need a bit more guidance (even though I read up on it).

Ok. Here is a example using the function defined earlier:

It would be nice to see your complete XSL stylesheet, maybe you could post it on this discussion or in a private email to me. In the template you mentioned earlier, where you do all the svg modification stuff you can make a call to the @f:get-svg()@ function and store the result in a xsl:variable, which you will use later. Something like the following:

...



 // loop through your rows
...


 






translate(0, 

)



...

1. Are you saying that the SVG should live in the XSL document or the datasource instead of the HTML page?

You don't have to change the structure of your code. The SVG can remain in the HTML page

2. I need to trigger the event on loading the page. Is this possible?

This is definitely possible. You can find the details in the Saxon-CE documentations (See: http://www.saxonica.com/ce/user-doc/1.1/index.html#!starting/running). The following example code snippet will run the transformation when the page is loaded:

<script>
var onSaxonLoad = function() {
    Saxon.run( {
        stylesheet:   "books.xsl",
        source:       "books.xml"
});
</script>

3. Can you provide more code to illustrate how it would integrate into my code.

If you have no xml data source you can load a template by name:

<script type="text/javascript"> 
  var onSaxonLoad = function() { proc = Saxon.run( { stylesheet:
    'scripts/example.xsl', initialTemplate: 'main', logLevel: 'SEVERE' } ); 
  }; 
</script>

I tried to implement your suggestions and its much clearer now. But unfortunately it's still not working for me. Also, still can't see how create a wrapper for an element. Only replacing the parents content using this line:

Heres all my code...

HTML:

    
        <title>SVG Row Layout</title>
        <script type="text/javascript" language="javascript" src="Saxon-CE_1.1/Saxonce/Saxonce.nocache.js"></script>
    <script>
    var onSaxonLoad = function(){
        Saxon.run( {
            stylesheet:   "distributeY.xsl",
            source:       "demo.svg" 
    })};
    </script>
    <style>
        body{margin: 0px}
    </style>

   


    
        
            
        
        
            
        
        
            
        
        
            
        
        
            
            
                	        
        	
        
        
            
                
            
            
            	
            
            
            	Some text
            
            
            	
            
            
            	kjaksj asd
            
            
            	
            
        
        
            
        
          
    

XSL:

   
    
        
        
    
    
    
        
        
            
                
                    
                    
                        0
                        
                            ,
                            
                            
                            
                            
                        
                    
                    
                    
                    
                    
                    
                    
                    
                    
                        
                                                    
                        
                        
                            
                                
                                    
                                        translate(0,
                                        
                                        )
                                    
                                    
                                        
                                    
                                
                            
                        
                    
                    
                
            
            
    
    
    

What you have will not work because you are mixing result-document and updates upon the HTML document. You need to stick to one or the other. You also could separate the steps.

Something like the following should work:

    
        
        
    

    
        
        
            
        
    

    
        
        
    

    
        
            
                
            
            
                    
                    
                        
                            translate(0,
                            
                            )
                        
                        
                            
                        
                    
                
            
        
    

    
        
        
    

It works! Your example got me most of the way and then just had to resolve some namespace issues. I can now copy and paste elements from Adobe illustrator generated SVG into tags and have Saxon-CE act as a simplistic layout manager. From here I'll be able to get columns working too. Very cool!

My code is probably not the best it could be, but it works. I thought it worth posting here as the final solution. Hopefully it will help others looking for an SVG layout management solution.

Thanks so much for helping with this O'Neil.

HTML

    
        <title>SVG Row Layout</title>
        <script type="text/javascript" language="javascript" src="Saxon-CE_1.1/Saxonce/Saxonce.nocache.js"></script>
    <script>
    var onSaxonLoad = function(){
        Saxon.run( {
            stylesheet:   "distributeY.xsl",
            source:       "" 
    })};
    </script>
    <style>
        body{margin: 0px}
    </style>

   
    
        

            
            	
                    
                    
                    Text
            	
            	
                    
                    
            	
            	
                    
            	
              
        
    

XSL

    
        
        
    

    
        
        
            
                
            
        
    

    
        
            
            
        
    

    
        
            0
            
                ,
                
                
                
                
            
        
        
        
        
        
        
        
            
                
                    
                    
                        
                    
                    
                
            
            
                
                    
                        translate(0,
                        
                        )
                    
                    
                        
                        
                    
                
            
        
    

That's good. If you have a live site with this application please may you add a link to this issue. I am interested in having a look at it.

I don't have a live site with this application at the moment, but plan to. Hopefully soon.