Question

我正在使用基于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>&nbsp;</span><input type="submit" value="submit" name="submit" /></label>
</form>
</div>


</body>
</html>

我看到的问题是图像在圆圈中没有居中对齐，它是由4个图像组成的平铺布局。

如何才能使其位置居中并很好地覆盖圆圈。

DEMO FIDDLE

Answer 1

您需要更改定义模式的方式。您应该根据它所应用的元素来定义它。因此，请将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");

Demo fiddle here

D3.js CodeFlower图像为圆形背景

1 个答案: