SVG в Clojurescript - PullRequest
Новая
       21

SVG в Clojurescript

4 голосов
/ 07 октября 2011

Какой лучший способ добавить элементы SVG в dom в Clojurescript?В примере Twitterbuzz используются графические объекты библиотеки Google Closure, но, скажем, меня не заботит совместимость с IE, есть ли способ добавить элементы так, как html (dom/build [:svg [:g [:text "something like this ?"]]]) Я пробовал графический редактор Closure, но не могу использоватьмного полезных возможностей SVG.Я попробовал Apogee, но он сериализует код SVG, и я бы предпочел прямую манипуляцию DOM.

Ответы [ 4 ]

4 голосов
/ 08 октября 2011

dom / build создает элементы DOM без пространства имен. Вам нужно либо улучшить dom / build, либо написать один для SVG. Я использую следующий код для создания элементов SVG. 

(defn element-ns
  "Create a namespaced dom element"
  [namespace tag & args]
  (let [[tag attrs children] (normalize-args tag args)
        parent (. js/document createElementNS namespace (name tag))
        [parent children] (if (string? (first children))
                            [(set-text (element-ns namespace tag attrs) (first children))
                             (rest children)]
                            [parent children])]
    (doseq [[k v] attrs]
      (. parent setAttributeNS nil (name k) v))
    (apply append parent children)))

(defn build-svg
  "Build up a svg element from nested vectors."
  [x]
  (if (vector? x)
    (let [[parent children] (if (keyword? (first x))
                          [(apply element-ns "http://www.w3.org/2000/svg" (take-while element-arg? x))
                           (drop-while element-arg? x)]
                          [(first x) (rest x)])
       children (map build-svg children)]
       (apply append parent children))
    x))
3 голосов
/ 24 октября 2011

Вас может заинтересовать моя библиотека cljs-d3 , которая является оболочкой ClojureScript для библиотеки JavaScript D3.D3 - отличный инструмент для манипулирования SVG DOM.

2 голосов
/ 05 февраля 2012

Как насчет использования Enlive для SVG?Это то, что я планирую использовать для нескольких проектов в реальном времени.

0 голосов
/ 26 сентября 2018

Если вы хотите загрузить svg как внешний ресурс, попробуйте загрузить его как текст и добавить его в div, используя cljs-d3: 

(defn load-svg-as-text []
 (fn []
   (let [on-complete (fn [error externalSVGText]
    (-> d3
     (.select "#viewport")
     (.html externalSVGText))
    )]
  (-> d3
    (.text "images/smartcity.svg" on-complete)))))

Идея пришла от AmeliaBR хороший ответ в этом js-потоке , а затем перенес его на ClojureScript

...