SVG textPath?

[Simon Holgate]

Hi,

I'm new to C2 but enjoying very much. 

I'm trying to place some curved text along a textPath and want to do something like:

[:text 
  {:text-path {:xlink:href (str "#" name)}}]

This doesn't work so I'd appreciate any hints.

Thanks,

Simon 

[Kevin Lynagh]

What is rendering to the DOM?

I think you may need to say :textPath instead of :text-path.

--
You received this message because you are subscribed to the Google Groups "C2-cljs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to c2-cljs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Kevin Lynagh
Keming Labs
http://keminglabs.com
888.502.1042

[Simon Holgate]

Thanks for the swift reply. Using 'textPath' doesn't resolve it unfortunately.

I'm playing with a slight variation to the sunburst example, so the full svg snippet looks like this:

[:svg {:width (* 2 radius) :height (* 2 radius)}
   [:g {:transform (str "translate(" radius "," radius ")")}
    (unify slices
     (fn [{name :name, bites :bites
          {:keys [x dx y dy]} :partition}]
       [:g.slice
        [:path {:title name
                :d (arc :inner-radius (sqrt y)
                        :outer-radius (sqrt (+ y dy))
                        :start-angle x
                        :end-angle  (+ x dx))
                :fill (color-scale name)}]
        ;;Make a label.
              ;;SVG doesn't support radial coordinates, so this is a bit ugly...
              (let [label-angle (+ x (/ dx 2))]
                [:text {:x (* 0.8 radius (cos label-angle))
                        :y (* 0.8 radius (sin label-angle))
                        :text-anchor (condp > (mod label-angle Tau)
                                       (* Tau 0.25) "start"
                                       (* Tau 0.75) "end"
                                       Tau "start")
                        :style (str "fill: white;"
                                    "font-size: 1.1em;"
                                    "font-family: sans-serif;")
                        :textPath {:xlink:href (str "#" name)}}
                 (str name)])]))]]

My expectation was that the text would follow the arc but it just remains horizontal. 

Thanks.

--
You received this message because you are subscribed to a topic in the Google Groups "C2-cljs" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/c2-cljs/aA1UkUugWZE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to c2-cljs+u...@googlegroups.com.

[Kevin Lynagh]

It doesn't look like you have an ID attribute on any other elements---try putting

    :id name

in the attribute map of the arc path.

[Simon Holgate]

Thanks for the suggestion, Kevin. I did need an id but after looking at the svg output I realised I had my nesting wrong for the textPath. 

It should look something like:

[:svg {:width (* 2 radius) :height (* 2 radius)}
   [:g {:transform (str "translate(" radius "," radius ")")}
    (unify slices
     (fn [{name :name, bites :bites
          {:keys [x dx y dy]} :partition}]
       [:g.slice
        [:path {:title name

                :id name

                :d (arc :inner-radius (sqrt y)
                        :outer-radius (sqrt (+ y dy))
                        :start-angle x
                        :end-angle  (+ x dx))
                :fill (color-scale name)}]
        ;;Make a label.
              ;;SVG doesn't support radial coordinates, so this is a bit ugly...
              (let [label-angle (+ x (/ dx 2))]
                [:text {:x (* 0.8 radius (cos label-angle))
                        :y (* 0.8 radius (sin label-angle))
                        :text-anchor (condp > (mod label-angle Tau)
                                       (* Tau 0.25) "start"
                                       (* Tau 0.75) "end"
                                       Tau "start")
                        :style (str "fill: white;"

                                    "font-size: 30;"
                                    "font-family: sans-serif;"
                                    "letter-spacing: 2;")}
                 [:textPath {:xlink:href (str "#" name)
                             :startOffset "25%"}
                  [:tspan {:dy 40}
                   (str name)]]])]))]]

It still needs a little tinkering but it's basically sorted now.

Cheers.

[Kevin Lynagh]

Awesome, glad to hear it.

Feel free to post to the list if you run into anything else.

--
You received this message because you are subscribed to the Google Groups "C2-cljs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to c2-cljs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.