Coffeehouse Thread

2 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

Making SVG useful for web design

Back to Forum: Coffeehouse
  • User profile image
    brian.​shapiro

    Now that we'll be able to include inline SVG in markup with HTML5, I think there should be some additions to CSS to actually make SVG useful. For instance, being able to set the shape of a div element using a shape parameter:

     

    <div style="shape:url(#starburst)">Inner text here</div>

     

    Which, of course, could be be set in a stylesheet. Additionally, parameters that will allow the designer to determine how the inner text is layed out in accordance with the shape.

     

    For instance, a flow parameter, with the following options:

     

    flow:interior - flow of the text is confined to a rectangle defined by the inner space of the shape

    flow:contour - flow of the text contours the interior of the shape

     

    <div style="shape:url(#circle); flow:contour">Contoured text</div>

     

    Additionally, if a floated div is set to a certain shape, and the adjacent div has an undefined shape with a flow:contour, the edge would be contoured to the shape in the first div.

     

    <div style="shape:url(#circle); float:left;">Circle text</div><div style="flow:contour">Contoured text</div>

     

    A second possible CSS parameter would be shaping the text's baseline to a path or to paths that contour a shape's interior.

     

  • User profile image
    magicalclick

    I believe the inner text should be defined using "path", instead of shape.

     

    Leaving WM on 5/2018 if no apps, no dedicated billboards where I drive, no Store name.
    Last modified

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.