小编Rob*_*son的帖子
为什么这个 SVG 图像的高度为 150px
为什么这个 SVG 图像在这个 500 像素的容器内以 150 像素的高度显示？为什么是这个特定值？
我在 js bin 和 Codepen 中都发现了这种奇怪的行为，所以我认为这与我的代码有关，而不是与在线编辑器有关。
注意：一个 700px 的 div 容器会产生同样的结果。所以父母的身高并不重要。
<div style="padding: 30px; background-color: yellow; height: 500px; width: 500px; ">
<svg>
<pattern id="basicPattern" x="10" y="10" width="40" height="40" patternUnits="userSpaceOnUse" >
<rect x= "0" y="0" width="4" height="4"
stroke = "red"
stroke-width = "1"
fill = "black"/>
</pattern>
<!-- <rect x="0" y="0" width="300" height="151" // why this deletes the bottom line? -->
<!-- <rect x="0" y="0" width="300" height="150" // why this deletes 1 px from …9
推荐指数
推荐指数
1
解决办法
解决办法
3885
查看次数
查看次数
SVG 动画淡入淡出
嗨，我有一个 SVG，它是堆叠的 5 个箭头形状。我想从下往上淡入每个箭头。当顶部箭头淡入时，我希望第一个淡出，然后第二个等等。然后通过淡入每个箭头再次开始动画。
这是SVG代码的代码笔：https : //codepen.io/anon/pen/gyJZEy
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 122.91 110.38">
<defs>
<style>.hg{fill:#ee2330;opacity:0}</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<rect>
<animate id="hg0" begin="0;hg0.end" dur="8s"
attributeName="visibility" from="hide" to="hide"/>
</rect>
<path class="hg" d="M61.65 86.78l-.16-.06L0 109.38v.99l61.49-22.65 61.43 22.66v-.99L61.65 86.78z">
<animate id="hg1" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin;hg0.end" repeatCount="indefinite"/>
</path>
<path class="hg" d="M0 87.69v1.49l61.49-22.66 61.43 22.67v-1.48L61.49 65.04 0 87.69z">
<animate id="hg2" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+1s;hg0.end+1s" repeatCount="indefinite"/>
</path>
<path class="hg" d="M0 66.05v1.97l61.49-22.66 61.43 22.67v-1.97L61.49 43.39 0 66.05z">
<animate id="hg3" …8
推荐指数
推荐指数
2
解决办法
解决办法
5508
查看次数
查看次数
我可以使用SVG Salamander将SVG栅格化为PNG文件吗？
我已经看到它导致SVG-Salamander对我的项目来说足够小.但我不知道我是否可以使用它,因为它既不会怎么做.
我使用这段代码:
public static void main(String[] args) throws IOException, SVGException {
// TODO Auto-generated method stub
File f = new File("./src/game_scheme.svg");
SVGUniverse svgUniverse = new SVGUniverse();
SVGDiagram diagram = svgUniverse.getDiagram(svgUniverse.loadSVG(f.toURL()));
BufferedImage bi = new BufferedImage(320, 240, BufferedImage.TYPE_INT_ARGB);
Graphics2D ig2 = bi.createGraphics();
diagram.render(ig2);
ImageIO.write(bi, "PNG", new File("./yourImageName.png"));
}
但图像并不流畅:(,任何想法？
7
推荐指数
推荐指数
1
解决办法
解决办法
3112
查看次数
查看次数
试图制作一个for循环来绘制一个svg
我刚刚开始学习SVG,并想尝试制作一个for循环来在我的html中画出很多圈子.可以这样做,我试图这样做,还是我想做的不可能？
<html>
<body>
<h1>My first SVG for loop</h1>
<script type="text/javascript">
var circlex = 50;
var circley = 50;
for (var i = 0; i < 100; i++) {
<svg width="100" height="100">
<circle cx="circlex + 1" cy="circley + 1" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
};
</script>
</body>
</html>
7
推荐指数
推荐指数
2
解决办法
解决办法
3383
查看次数
查看次数
SVG d3 | 我可以动态添加内联样式吗？
我需要动态地为我的SVG添加内联样式.我有1000多个SVG图表,我必须保存为PNG.然后,这些将被托管给最终客户(不允许他们查看图表背后的完整数据).当我转换图表时,他们必须保持格式.
SVG将动态添加,我需要为每个添加(相同)样式声明.这是丑陋的,但只是暂时的,直到我生成PNG.我手动进行内联样式/导出工作.
我最近的努力是这样的:
addStyle(svg);
function addStyle(svg) {
var style = svg.append("style")
.attr("type","text/css")
.attr("float","left");
}
它在注释中添加了样式/样式元素.它忽略了浮动:左; 我是否将其添加为.attr()或.style().
编辑:添加CSS代码.我需要添加的CSS是图表:
g.axis path {
fill: none;
stroke: dimgray;
stroke-width: 0.5px;
}
g.axis g.tick line {
stroke: dimgray;
stroke-width: 1px;
}
g.grid g.tick line {
stroke: lightgray;
stroke-width: 0.5px;
}
path.lineF.cons,
path.line.cons {
stroke: white;
fill: none;
stroke-width: 2px;
}
text.import {
fill: #FF376F; /* pink */
}
rect.import {
fill: #FF376F; /* pink */
stroke: white;
stroke-width: 1px;
cursor: pointer;
}
text.export { …7
推荐指数
推荐指数
1
解决办法
解决办法
3846
查看次数
查看次数
SVG Salamander的例子？
我正在玩Java和SVG Salamander但是不能完全了解如何将一个简单的SVG文件渲染成一个JPanel.
有人能给我一个简短的例子吗？试图按照官方网站上的松散教程,但找不到简单的代码来更好地理解.
6
推荐指数
推荐指数
2
解决办法
解决办法
7493
查看次数
查看次数
IF EXISTS UPDATE ELSE INSERT语法错误
我在我的ISP上使用MySQL 5.1.这是我的查询
mysql_query("
IF EXISTS(SELECT * FROM licensing_active WHERE title_1='$title_1') THEN
BEGIN
UPDATE licensing_active SET time='$time' WHERE title_1='$title_1')
END ELSE BEGIN
INSERT INTO licensing_active(title_1) VALUES('$title_1')
END
") or die(mysql_error());
错误是
... check the manual that corresponds to your MySQL server version for the right syntax to use near 'IF EXISTS(SELECT * FROM licensing_active WHERE title_1='Title1') THEN ' at line 1
我的实际任务涉及到
WHERE title_1='$title_1' AND title_2='$title_2' AND version='$version' ...ETC...
但是我已经减少了它以使我的问题解决更简单
在我对此的搜索中,我一直看到"ON DUPLICATE KEY UPDATE"的引用,但不知道如何处理它.
6
推荐指数
推荐指数
2
解决办法
解决办法
3万
查看次数
查看次数
带有子查询的JPQL,用于选择最大计数
我正在尝试编写一个jpql查询来选择评论最多的用户.如果两个用户具有相同数量的评论,我想同时选择它们.
我试过这个,像这样:
SELECT
c.user, COUNT(c.id) as commentCount
FROM
Comment c
WHERE
commentCount = (SELECT MAX(SIZE(user.comments)) FROM User user)
GROUP BY
c.user
还有这个:
SELECT
c.user
FROM
Comment c
GROUP BY
c.user
HAVING
COUNT(c) = (SELECT MAX(SIZE(user.comments)) FROM User user)
两种方法都不奏效.我需要做什么？
6
推荐指数
推荐指数
2
解决办法
解决办法
7381
查看次数
查看次数
d3圈onclick事件未触发
我从svg开始,我创建了以下标记.
<svg width="500" height="600" class="graph-container">
<g>
<rect x="150" y="190" height="50" width="200" rx="30" ry="30" nodeId="1" children="3" style="fill: none; stroke: rgb(68, 68, 68);"></rect>
<text x="250" y="220" text-anchor="middle" fill="#444" style="font-size: 24px;">root</text>
</g>
</svg>
我通过d3js在较大的矩形中添加了一个小圆圈.
$( document ).ready(function() {
var node = d3.select('g');
var addchild = node.append("circle")
.attr("cx",320)
.attr("cy",210)
.attr("r",10)
.attr("class","addchild")
.style("fill","none")
.style("stroke","#444");
addchild.on("click", function() {
alert("on click");
});;
});
但是click事件没有触发.
这是相同的jsfiddle.
6
推荐指数
推荐指数
1
解决办法
解决办法
3440
查看次数
查看次数
svg 元素相对于其自身大小的偏移（使用变换）
我想使用百分比转换来相对于其自身大小偏移 SVG 元素，这与使用 offset div 的transform: translate(100%,0)工作方式非常相似：
这段代码：
<div style={{ overflow: 'visible', position: 'relative' }}>
{/* rect */}
<div style={{ height: 20, width: 20, background: 'black', position: 'absolute' }} />
{/* circle */}
<div
style={{
height: 20,
width: 20,
background: 'purple',
borderRadius: '50%',
position: 'absolute',
transform: 'translate(100%,0)',
}}
/>
</div>
看起来像这样
很好，圆的偏移量是相对于它自己的大小的
而这种情况：
<svg overflow={'visible'}>
<rect width={20} height={20} />
<circle cx={10} cy={10} r="10" fill="purple" style={{ transform: 'translate(100%,0px)' }} />
</svg>
将导致渲染：
它基本上是相对于 svg 画布大小的偏移（我从未明确设置过）：
为什么transform: 'translate(100%,0)'在 …
6
推荐指数
推荐指数
1
解决办法
解决办法
657
查看次数
查看次数