相关疑难解决方法(0)
如何按视口的百分比转换SVG组
我有一个(组)中的svg <rect>,<g>我想缩放它,然后将其翻译为视口的百分比.svg中的大多数内容都允许通过一系列荒谬的选项来指定单位; 例如px,em,%,ex,pt,pc,......但似乎翻译中指定的数字只是像素.
事情是,如果我必须返回并重新计算翻译的像素值,那么我的svg将依赖于分辨率.然后我,你和每个人都会陷入悖论.你可以看出为什么我有点担心.
<svg>
<g transform="scale(1, 1) translate(0, 0)">
<rect x="45%" y="25%" height="50%" width="10%"/>
</g>
</svg>
33
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
Svg路径位置
我有一个SVG路径,定义如下:
<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="200px"
height="280px" viewBox="0 0 850.39 850.39"
enable-background="new 0 0 850.39 850.39" xml:space="preserve" class="hand">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#0D0D0D" d="M480.366,674.977c-1.345-36.176,16.102-91.082,42.928-100.447
s99.269-89.711,108.649-100.418c9.381-10.734,14.758-17.416,24.139-45.541c9.409-28.123,54.996-69.638,54.996-69.638
c18.79-20.072,36.236-25.44,45.616-25.44c9.381,0,29.515-5.368,34.863-14.733c5.377-9.365,6.721-30.779-26.826-44.199
c-33.519-13.362-54.997-24.098-127.411,36.176c-72.442,60.245-97.925,3.997-97.925,3.997c-30.859-54.877-16.102-137.906,0-199.522
c16.102-61.587,20.105-172.74,12.069-190.157c-8.037-17.389-34.12-19.33-45.617-10.707c-12.212,9.193-22.793,89.739-32.174,124.544
c-9.409,34.805-25.482,97.763-25.482,97.763c-4.032,42.856-36.236,28.124-46.96,20.072c-10.725-8.023-17.446-73.636-16.102-84.343
c1.344-10.735,0-41.515-1.344-49.566c-1.315-8.023-21.45-97.762-25.482-128.542c-4.004-33.492-29.515-40.173-42.928-38.831
c-13.384,1.313-22.794,13.391-22.794,25.44c0,12.049,9.41,115.151,6.721,123.203c-2.688,8.023,1.344,73.636,6.692,83.029
c1.344,12.049,9.38,68.268,4.032,70.952c-5.348,2.684-17.446-13.391-25.482-38.831c-8.065-25.44-24.138-73.636-24.138-73.636
c-9.409-21.443-14.757-79.032-20.134-104.472c-5.348-25.44-20.105-34.805-38.895-32.15c-16.102,2.684-26.827,28.152-24.138,40.202
c5.348,9.365,18.761,155.323,24.138,167.373c5.348,12.049,26.826,80.345,25.482,85.713c-1.344,5.339-8.065,8.023-20.134,3.998
c-12.041-3.998-71.07-113.809-71.07-113.809c-21.45-37.489-25.482-72.323-60.374-57.59c-22.793,12.049-9.38,34.833-4.004,57.59
c8.037,36.147,84.512,166.059,79.135,180.792c-5.377,14.733,28.17,176.737,28.17,176.737c0,26.783,65.722,156.695,68.381,164.719
c2.717,8.051,2.145,84.17,0,113.836c-1.916,27.012-6.635,164.547-9.123,239.324c-0.257,8.023,2.431,15.018,8.037,20.785
c5.577,5.768,12.498,8.709,20.534,8.709H469.87c8.265,0,15.387-3.111,20.992-9.164c5.634-6.082,8.179-13.42,7.521-21.643
C490.919,872.699,481.396,702.414,480.366,674.977L480.366,674.977z" />
</g>
</svg>我需要给这条路径一个绝对的位置.我尝试过设置cx和cy属性,但这不起作用.
我该怎么做才能设定绝对位置？
29
推荐指数
推荐指数
4
解决办法
解决办法
3万
查看次数
查看次数
为SVG的g元素设置X和Y值
我在使用HTML5的SVG绘图中相对较新。
我想要做的就是让一组SVG元素与g组件，使得内部的所有元素摹元素可以像一个组和所有元素的基础工作，X和Ÿ值可以从接收上部g组件。
所以，我所做的就是这样-
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
<g x="1000" y="1000">
<title>SVG Title Demo example</title>
<rect width="200" height="50"
style="fill:wheat; stroke:blue; stroke-width:1px"/>
<text style="text-anchor: middle;" class="small">My Text</text>
</g>
</svg>我所期望的是g元素内的所有元素都会得到x="1000"，y="1000"所以我的期望输出是这样的-
但是我得到这个-
回覆-
我不喜欢在textelement中设置x和y 元素。我只想在需要时将相对x和y设置到text元素中，但这应该相对于g元素。
任何人都可以帮助我与SVG小组一起实现我的目标所需做的事情吗？
3
推荐指数
推荐指数
1
解决办法
解决办法
4267
查看次数
查看次数
如何定位"g"元素SVG
我有一个SVG元素,它是一个圆圈的箭头:https://jsfiddle.net/seabon/806ew03a/
<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="15 15 102 102" style="enable-background:new 0 0 132 132;" xml:space="preserve" data-link="go_down">
<g class="cross-circle">
<g class="go-clockwise">
<circle class="st0" cx="66" cy="66" r="43.7"/>
</g>
</g>
<g class="down">
<polyline class="st1" points="76.4,71 66,81.4 55.6,71 "/>
<line class="st1" x1="66" y1="81" x2="66" y2="47"/>
</g>
</svg>
我想用css翻译箭头位置.我尝试在g元素上使用"相对"类的位置相对但它不起作用.我试图放一个foreignObject但是也不行.有人有想法吗？
2
推荐指数
推荐指数
1
解决办法
解决办法
2707
查看次数
查看次数