Jquery 如何告诉浏览器重新呈现替换的SVG内容
我有一个SVG,到目前为止很简单;想象一下,我也想在我的页面上有一个SVG的缩略图 那么,实现这一目标的(相当简单的)方法是什么:Jquery 如何告诉浏览器重新呈现替换的SVG内容,jquery,svg,Jquery,Svg,我有一个SVG,到目前为止很简单;想象一下,我也想在我的页面上有一个SVG的缩略图 那么,实现这一目标的(相当简单的)方法是什么: $('#thumbnail').html($('#the-picture').html()) 当缩略图和图片是SVG元素时 问题是,SVG引擎在内容更改后不会(重新)呈现。我确信我已经准备好阅读这里的解决方案了,但是我再也找不到了 注释一:如果服务器端的SVG的“html”是dup,它看起来就像我想要的一样漂亮 注释II:DOMbroser向我显示了正确的内容,但
$('#thumbnail').html($('#the-picture').html())
当缩略图
和图片
是SVG元素时
问题是,SVG引擎在内容更改后不会(重新)呈现。我确信我已经准备好阅读这里的解决方案了,但是我再也找不到了
注释一:如果服务器端的SVG的“html”是dup,它看起来就像我想要的一样漂亮
注释II:DOMbroser向我显示了正确的内容,但它没有显示在元素中
编辑
我想稍后将我的缩略图用作主svg的镜头您可以将svg元素放入图像标记中,并根据需要设置图像标记的样式,从而调整其大小。不需要javascript 下面是一个jsfiddle来演示我将如何做到这一点 html
<img class="thumbnail" src="http://s.cdpn.io/3/kiwi.svg">
<img class="main" src="http://s.cdpn.io/3/kiwi.svg">
<div class="main">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="612px" height="502.174px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174"
xml:space="preserve">
<ellipse fill="#C6C6C6" cx="283.5" cy="487.5" rx="259" ry="80"/>
<path id="bird" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03
c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341
c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933
c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991
c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875
c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489
c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309
c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876
c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413
c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566
c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156
c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351
c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247
c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331
z M445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111
C434.693,207.929,439.613,203.01,445.731,203.01z"/>
</svg>
</div>
<div class="thumbnail">
</div>
编辑
或者,如果您不想请求两次数据,可以执行以下操作:
jsfiddle:
js
.thumbnail{
width:100px;
position:absolute;
top: 0;
background:white;
border: 1px solid grey;
}
.main{
width:500px;
}
var svg = $("#Layer_1");
var thumbnailWidth = svg.width() / 4;
var thumbnailHeight = svg.height() / 4;
$("#Layer_1").clone().width(thumbnailWidth).height(thumbnailHeight).appendTo(".thumbnail");
.thumbnail{
position:absolute;
top: 0;
background:white;
border: 1px solid grey;
}
html
<img class="thumbnail" src="http://s.cdpn.io/3/kiwi.svg">
<img class="main" src="http://s.cdpn.io/3/kiwi.svg">
<div class="main">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="612px" height="502.174px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174"
xml:space="preserve">
<ellipse fill="#C6C6C6" cx="283.5" cy="487.5" rx="259" ry="80"/>
<path id="bird" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03
c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341
c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933
c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991
c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875
c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489
c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309
c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876
c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413
c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566
c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156
c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351
c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247
c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331
z M445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111
C434.693,207.929,439.613,203.01,445.731,203.01z"/>
</svg>
</div>
<div class="thumbnail">
</div>
为了清楚起见,您希望在主svg图像更改时重新渲染缩略图?否-无更改;我希望我的缩略图具有与主svg相同的内容(只是更小),并显示此内容,考虑一下,我不希望将svg数据发送两次以获得答案;这不符合我的问题。我想要两个svg,我不想两次传输数据这可能是一个解决方案,克隆一个div的内容并对其进行更改,而不是克隆svg(如果我正确阅读了您的答案),需要一点时间来实现这一点,我足够好,可以免费为您编写代码,其余的工作您可以完成。克隆svg interieur(内部)$(“#图片”).clone().appendTo($(“#lense svg”))