Geek asks and answers

How can I center an element of an SVG file displayed in a UIWebView?

I have an SVG file displayed inside UIWebView. This SVG contains several tags <a>that indicate tangible elements. After loading the SVG file, I would like to scroll the view so that a certain element is somewhere near the center of the screen.

What I have so far looks something like this:

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    [diagramView stringByEvaluatingJavaScriptFromString:@""
        "var e = document.getElementById('myelement');"
        "var top = e.offsetTop;"
        "while (e.offsetParent) {"
        "    e = e.offsetParent;"
        "    top += e.offsetTop;"
        "}"
        "alert(top);"
        //"scrollTo(0, top);"
    ];
}

However top, 0 ends when this is done. The element epoints to the correct <a>element of the SVG file (marked with alert(e.id)). I cannot find the correct combination of element attributes that gives me the actual offset.

I could hardcode the suitable set of offsets, but I really don't want that.

+3
1

, . getBBox, http://www.w3.org/TR/SVG11/types.html#__svg__SVGLocatable__getBBox (, , SO-)

- https://upload.wikimedia.org/wikipedia/commons/0/07/Wikipedia_logo_(svg).svg Chrome $('#path3695').getBBox().y

, :

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    [diagramView stringByEvaluatingJavaScriptFromString:@""
        "var e = document.getElementById('myelement');"
        "var top = e.getBBox().y;"
        "alert(top);"
        "scrollTo(0, top);"
    ];
}
0

More articles:


All Articles