我正在使用基于D3.js构建的CodeFlower。我想将图像显示为背景而不是任意颜色,我使用SVG模式成功地做到了这一点。
<?php
include_once('connection.php');
if(isset($_GET['details_id']))
{
$id=$_GET['details_id'];
if(isset($_POST['submit']))
{
$title = $_POST['title'];
$pageno = $_POST['page'];
$author = $_POST['author'];
//$authorimg = $_POST['image'];
$article_status = $_POST['articlestatus'];
$sketch_status = $_POST['sketchstatus'];
$final_approval_person = $_POST['finalperson'];
$final_approval_date = $_POST['finaldate'];
$status = $_POST['status'];
$query = "update details set title='$title', page_no='$pageno', author='$author', article_status='$article_status', sketch_status='$sketch_status', final_approve_person='$final_approval_person', final_approve_date='$final_approval_date', status='$status', where id=$id";
$res = mysqli_query($DBCONNECT,$query);
if($res)
{
header('location:committee.php');
}
else
{
echo mysql_error();
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body style="margin-left:30%;">
<div class="form-style-2">
<div class="form-style-2-heading">Provide Following Information</div>
<form action="" method="post">
<label for="field1"><span>Title <span class="required">*</span></span><input type="text" class="input-field" name="title" value="" /></label>
<label for="field1"><span>Page No. </span><input type="number" class="input-field" name="page"
min="0" max="100" step="10" value="30"></label>
<label for="field2"><span>Author <span class="required">*</span></span><input type="text" class="input-field" name="author" value="" /></label>
<label for="field1"><span>Author Image <span class="required">*</span></span><input type="file" class="input-field" name="image" value="" /></label>
<label for="field4"><span>Article Status</span><select name="articlestatus" class="select-field">
<option value="notrecieved">Not Recieved</option>
<option value="recieved">Recieved</option>
</select></label>
<label for="field4"><span>Sketch Status</span><select name="sketchstatus" class="select-field">
<option value="notapproved">Not Approved</option>
<option value="approved">Approved</option>
</select></label>
<label for="field2"><span>Final Approval Person <span class="required">*</span></span><input type="text" class="input-field" name="finalperson" value="" /></label>
<label for="field2"><span>Final Approval Date <span class="required">*</span></span><input type="date" class="input-field" name="finaldate" value="" /></label>
<label for="field2"><span>Status <span class="required">*</span></span><input type="text" class="input-field" name="status" value="" /></label>
<!--<label for="field4"><span>Regarding</span><select name="field4" class="select-field">
<option value="General Question">General</option>
<option value="Advertise">Advertisement</option>
<option value="Partnership">Partnership</option>
</select></label>
<label for="field5"><span>Message <span class="required">*</span></span><textarea name="field5" class="textarea-field"></textarea></label>
-->
<label><span> </span><input type="submit" value="submit" name="submit" /></label>
</form>
</div>
</body>
</html>
我看到的问题是图像在圆圈中没有居中对齐,它是由4个图像组成的平铺布局。
如何才能使其位置居中并很好地覆盖圆圈。
答案 0 :(得分:3)
您需要更改定义模式的方式。您应该根据它所应用的元素来定义它。因此,请将patternUnits
保留为默认值objectBoundingBox
,并将width
和height
设置为1
。
然后您还需要将patternContentUnits
设置为objectBoundingBox
,并为<image>
提供相同的尺寸(1
的宽度和高度)。
this.node.enter().append('defs')
.append('pattern')
.attr('id', function(d) { return (d.id+"-icon");})
.attr('width', 1)
.attr('height', 1)
.attr('patternContentUnits', 'objectBoundingBox')
.append("svg:image")
.attr("xlink:xlink:href", function(d) { return (d.icon);})
.attr("height", 1)
.attr("width", 1)
.attr("preserveAspectRatio", "xMinYMin slice");