Project

Profile

Help

ixsl:wrap-content

Added by Lincoln Mitchell about 7 years ago

Hi,

Can I create an element around the targeted element, instead of inside it. Is this possible?

If not a 'wrap' method would be useful. Something like: <xsl:result-document href="#obj" method="ixsl:wrap-content">

</xsl:result-document>

Output being:

BTY: I had thought of getting the parent of the target element and replacing it with the about output. But this will not work in my particular instance as the object has other sibling elements that I do not want to replace. e.g:

Hope this is clear enough.

Regards, ink


Replies (12)

Please register to reply

RE: ixsl:wrap-content - Added by O'Neil Delpratt about 7 years ago

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.

RE: ixsl:wrap-content - Added by Lincoln Mitchell about 7 years ago

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:

...

Here is a snippet of the xsl I am currently using, But as you can see it will just replace the content of the targets parent: <xsl:result-document href="?select=..". Which means, the polygon will replace all sibling nodes. ... xsl:choose <xsl:when test="@y"> <ixsl:set-attribute name="y" select="$yPos" />
</xsl:when> xsl:otherwise <xsl:result-document href="?select=.." method="ixsl:replace-content"> <xsl:attribute name="transform"> xsl:texttranslate(0,</xsl:text>
<xsl:value-of select="$yPos"/> xsl:text)</xsl:text> ...

If you are wondering why I have the SVG in the HTML and not as the "data-source='mySVG.svg'" then its because I am using "ixsl:call(., 'getBBox')" on the g tags to get their height and y values. And did not know how to get getBBox on the data-source.

RE: ixsl:wrap-content - Added by Lincoln Mitchell about 7 years ago

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.

RE: ixsl:wrap-content - Added by O'Neil Delpratt about 7 years ago

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?

RE: ixsl:wrap-content - Added by Lincoln Mitchell about 7 years ago

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.

RE: ixsl:wrap-content - Added by O'Neil Delpratt about 7 years ago

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

  1. 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>
  1. 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>

RE: ixsl:wrap-content - Added by Lincoln Mitchell about 7 years ago

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,
                                        
                                        )
                                    
                                    
                                        
                                    
                                
                            
                        
                    
                    
                
            
            
    
    
    


RE: ixsl:wrap-content - Added by O'Neil Delpratt about 7 years ago

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.

RE: ixsl:wrap-content - Added by O'Neil Delpratt about 7 years ago

Something like the following should work:


    
        
        
    

    
        
        
            
        
    

    
        
        
    

    
        
            
                
            
            
                    
                    
                        
                            translate(0,
                            
                            )
                        
                        
                            
                        
                    
                
            
        
    

    
        
        
    

RE: ixsl:wrap-content - Added by Lincoln Mitchell about 7 years ago

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,
                        
                        )
                    
                    
                        
                        
                    
                
            
        
    


RE: ixsl:wrap-content - Added by O'Neil Delpratt about 7 years ago

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.

RE: ixsl:wrap-content - Added by Lincoln Mitchell about 7 years ago

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

    (1-12/12)

    Please register to reply